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.
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
Load Balancing –
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. –