L'accès Redux Magasin de routes configuré via le Routeur Réagir
Je voudrais faire usage de réagir-routeur onEnter
gestionnaire afin d'inciter les utilisateurs à s'authentifier lors de la saisie d'une route réservée.
Jusqu'à présent, mon routes.js
fichier ressemble à ceci:
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>
)
Idéalement, j'aimerais que mon requireAuth
fonction à un redux de l'action qui a accès à la mémoire et à l'état actuel, qui fonctionne comme ceci: store.dispatch(requireAuth())
.
Malheureusement je n'ai pas accès à la boutique dans ce fichier. Je ne pense pas que je peux l'utiliser vraiment utiliser se connecter
dans ce cas, pour accéder aux actions que je veux. Je ne peux pas juste import store
à partir du fichier où le magasin est créé, car il n'est pas défini lors de la première application de la charge.
Vous devez vous connecter pour publier un commentaire.
La façon la plus simple d'y parvenir est de passer votre magasin pour une fonction qui renvoie vos itinéraires (plutôt que de retourner vos itinéraires directement). De cette façon, vous pouvez accéder à la boutique en
onEnter
et d'autres réagissent routeur méthodes.Donc pour vos itinéraires:
Puis mettre à jour votre composant principal d'appeler le
getRoutes
fonction, en passant dans le magasin:Que pour l'envoi d'action de
requireAuth
, vous pouvez écrire votre fonction comme ceci:Espère que cette aide.
Si vous voulez que l'on peut écrire route.js comme ceci:
J'ai configuré un exemple qui vous pourriez jouer avec dans ce codepen.
Ne sais pas si le déclenchement d'une action afin de gérer l'authentification est une bonne idée. Personnellement, je préfère la manipulation auth dans une manière différente:
Au lieu d'utiliser un
onEnter
crochet, j'utilise un emballage de fonction. Je veux la section admin de mon blog protégé, donc j'ai enveloppé leAdminContainer
composant dans les routes avec une fonction,requireAuthentication
, voir ci-dessous.requireAuthentication
est une fonction quiLogin
Vous pouvez le voir ci-dessous:
Aussi,
requireAuthentication
permettra de protéger toutes les routes sous/admin
. Et vous pouvez réutiliser chaque fois que vous le souhaitez.Beaucoup ont changé au fil du temps.
onEnter
n'existe plus surreact-router-4
Ce qui suit est mon vrai projet pour votre référence
JS: