2

Ich entwickle eine React-App mit React-Router mit einem Server, der sowohl die React-App selbst als auch eine REST-API hostet. Der Router ist ConnectedRouter von react-router-redux. Sobald ich die App in Ihrem Browser geöffnet habe, werden alle Änderungen an der URL nicht mehr vom Server angefordert, sondern stattdessen im Reverse-Router, selbst wenn Sie die Seite neu laden oder etwas manuell in die Adressleiste schreiben .Force React-Router-App zum Senden von URL-Anfragen an den Server

Beim ersten Öffnen der App werden die eigentlichen HTML-, JS- und CSS-Dateien vom Webserver geladen, der so konfiguriert ist, dass sie nur dann ausgeführt werden, wenn der Benutzer berechtigt ist. Auf diese Weise kann der Server den Benutzer zu einer Authentifizierungssite eines Drittanbieters umleiten oder eine 401-Nachricht senden, wenn der Benutzer authentifiziert, aber nicht autorisiert ist. Das Problem tritt jedoch auf, wenn die Benutzersitzung abläuft, er sich abmeldet oder seine Berechtigungen ändern, sodass er nicht mehr berechtigt ist, die App zu öffnen. Wenn der Benutzer die App dann in einem Browser öffnet, der ihn zuvor zwischengespeichert hat, scheint er wie üblich geöffnet zu sein, jedoch mit vielen Fehlern, da jetzt jeder API-Aufruf fehlschlägt.

Um dies zu lösen möchte ich, wenn die API-Aufrufe fehlschlagen, dem Benutzer sagen, die Seite neu zu laden, so dass eine Anfrage an den Server gestellt wird, um die App (index.html, etc) zu holen zur Drittanbieter-Authentifizierungsseite umgeleitet Ein regelmäßiger Browser-Reload (F5) schneidet jedoch nicht ab. Die Anfrage wird vom react-router verschluckt und trifft den Server nie. Dies ist auch bei window.location.reload() der Fall. Ein hartes Neuladen, d. H. Strg + F5, scheint zumindest in Chrome der Trick zu sein, aber einige Benutzer verstehen das möglicherweise nicht. Daher möchte ich dem Benutzer eine "Hard Reload" -Schaltfläche präsentieren, die dem React-Router temporär sagt, dass er URL-Anfragen liefern soll, damit diese zum Server gelangen und versuchen können, index.html zu holen.

Also meine Frage ist: Wie kann ich vorübergehend und programmatisch die clientseitige App erzwingen URL-Anfragen zu ermöglichen, auf den Server als normal zu gehen, im Gegensatz zu ihnen selbst in react-Router zu behandeln?

Alternativ, wenn dies nicht möglich ist, wie kann ich die App programmatisch aus dem Speicher des Browsers löschen, so dass es gezwungen wird, den Server erneut anzufragen?

Edit: Es scheint meine Annahme, dass die Anfragen von react-Router geschluckt wurden falsch war. Es war der Service-Mitarbeiter im create-react-app-Framework. Der Service-Mitarbeiter legt eine Funktion zur Aufhebung der Registrierung offen, die mein Problem gelöst hat.

+0

enthält Ihre URL '#'? Andernfalls empfängt Ihr Server korrekt Anfragen, aber es kann einen 'Wildcard' geben, der' index.html' immer zurücksendet. Schau dir deinen Server Side Router an. – Hitmands

+0

Load Balancing –

+0

Hitmands, nein, die URLs enthalten # nicht, was sie nicht benötigen, weil der Server (richtigerweise) überhaupt keine Anfragen empfängt (sie wären im Anfrageprotokoll aufgetaucht). Sie werden alle von react Router verschluckt. Ich möchte dies vorübergehend deaktivieren. –

Antwort

0

Wie ich verstehe, wenn Sie die App in Ihrem Browser geöffnet haben, werden alle Änderungen an der URL nicht vom Server angefordert werden, sondern behandelt die clientseitige Router reagieren, auch wenn Sie die Seite neu zu laden oder Schreibe etwas manuell in die Adressleiste.

Dies ist nicht wahr. Nach der manuellen Änderung in der Adressleiste (und Drücken der Eingabetaste), werden Sie immer zuerst den Server-Router drücken.

Es ist sehr wahrscheinlich, dass Ihr Server, egal welche URL getroffen wird, immer Ihre index.html darstellt, die Ihre React App enthält. Ähnliches:

app.use(express.static(path.join(__dirname, 'dist'))); 
app.get('*', function(req, res) { 
    res.sendfile('./dist/index.html'); 
}); 

Stellen Sie sicher, dass Ihre API-Anforderungen nicht in Konflikt mit diesem stehen. Teilen Sie nach Möglichkeit etwas Code mit, damit wir überprüfen können, was schief gehen könnte.

+0

Ich kann nichts in den Anforderungsprotokollen auf dem Server sehen. Aber ich habe nicht erwähnt, dass ich den "ConnectedRouter" von react-router-redux verwende. Vielleicht funktioniert das anders? Meine Top-Level-react Komponente sieht wie folgt aus: render() { return ( ); } –

+0

@ErikLothe Aber wenn Ihre Anfragen nie auf den Server zu bekommen und Sie aktualisieren, dann wird das Problem möglicherweise nicht auf dem Client, sondern der Server verursacht. Selbst wenn es merkwürdig ist, dass Ihr Server kein Protokoll für diese Anfrage erhält? Weil, um Webseite darzustellen (wenn Sie Adresse in URL eingeben oder es ändern und Enter drücken), müssen Sie immer zuerst Anfrage zum Server senden, sonst würden Sie etwas wie 404 erhalten. – Kunok

+1

Ich erwähnte auch nicht, dass ich create verwende -Reaktions-App-Framework. Es scheint, dass das Problem nicht bei der Reaktion lag, sondern bei dem Service-Mitarbeiter aus diesem Framework, der Anfragen zwischenspeichert. Dieses Modul macht eine Unregister-Funktion verfügbar. Scheint so, als wäre das, was ich wollte. Danke für die Hilfe! –

Verwandte Themen