Zugriff auf Redux Speichern von Routen einrichten über Router Reagieren
Möchte ich nutzen reagieren-Routers onEnter
- handler, um die Benutzer zur Authentifizierung bei der Eingabe einer eingeschränkten route.
Soweit mein routes.js
- Datei sieht ungefähr so aus:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
export default (
<Route path="/" component={App}>
<IndexRoute component={Landing} />
<Route path="learn" component={Learn} />
<Route path="about" component={About} />
<Route path="downloads" component={Downloads} onEnter={requireAuth} />
</Route>
)
Im Idealfall würde ich gerne meine requireAuth
- Funktion, um eine redux-action mit Zugriff auf den store und den aktuellen Zustand, das funktioniert wie folgt: store.dispatch(requireAuth())
.
Leider habe ich keinen Zugriff auf den store in dieser Datei. Ich glaube nicht, dass ich verwenden können, auch wirklich nutzen connect
in diesem Fall Zugriff auf die relevanten Aktionen, die ich will. Ich kann auch nicht einfach import store
aus der Datei, wo der laden ist, da dieser nicht definiert ist, wenn die app zum ersten mal geladen wird.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der einfachste Weg, dies zu erreichen, übergeben Sie Ihr Geschäft, um eine Funktion zurückgibt, die Ihre Routen (anstatt wieder Ihre Routen direkt). Auf diese Weise können Sie Zugriff auf den store in
onEnter
und andere reagieren-router-Methoden.Also für Ihre Routen:
Dann aktualisieren Sie Ihre wichtigsten Komponenten zu nennen, die
getRoutes
Funktion, vorbei in den laden:Als für das auslösen einer Aktion von
requireAuth
Sie konnte schreiben Sie Ihre Funktion so:Hoffe, das hilft.
Wenn Sie wollen, dass Sie schreiben konnte route.js wie diese:
Ich habe setup ein Beispiel, das Sie spielen könnte, mit in diesem codepen.
Nicht sicher, ob das auslösen einer Aktion, um die auth ist eine gute Idee. Ich persönlich bevorzuge die Handhabung auth in anders:
Statt mit einer
onEnter
Haken, ich benutze ein wrapping-Funktion. Ich möchte den admin-Bereich meines Blogs geschützt, daher wickelte ich dieAdminContainer
Komponente in den Strecken mit einer FunktionrequireAuthentication
siehe unten.requireAuthentication
ist eine Funktion, dieLogin
Können Sie finden es unter:
Auch
requireAuthentication
schützen alle Routen unter/admin
. Und Sie können es wiederverwenden, wo immer Sie möchten.Viele haben sich im Laufe der Zeit.
onEnter
existiert nicht mehr aufreact-router-4
Folgende ist aus meinem realen Projekt für Ihre Referenz
JS: