Explication détaillée des étapes pour contrôler les autorisations de routage avec React Router4+redux

Cette fois, je vais vous apporter une explication détaillée des étapes pour contrôler les autorisations de routage avec React Router4+redux Quelles sont les précautions pour contrôler les autorisations de routage avec React Router4+redux Voici des cas réels, jetons un coup d'oeil.

Vue d'ensemble

Un système de routage complet devrait ressembler à ceci. Lorsque le composant lié doit être connecté, il peut être visualisé et il doit pouvoir y accéder. la page de connexion, puis après une connexion réussie, il reviendra à la page que vous vouliez visiter auparavant. Ici, nous utilisons principalement une classe de contrôle d'autorisation pour définir le routage les informations de routage, et en même temps utiliser redux pour enregistrer l'adresse de routage à laquelle accéder après une connexion réussie. , vérifiez s'il y en a dans Redux. Enregistrez l'adresse. Si aucune adresse n'est enregistrée, passez à l'adresse de routage par défaut.

Classe de contrôle des autorisations de routage

Dans cette méthode, utilisez sessionStorage pour déterminer si vous êtes connecté. Si vous n'êtes pas connecté, enregistrez l'itinéraire actuel que vous souhaitez passez au redux. Accédez ensuite à notre page de connexion.

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { setLoginRedirectUrl } from '../actions/loginAction'
class AuthorizedRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props
    const isLogged = sessionStorage.getItem("userName") != null ? true : false;
    if(!isLogged) {
      setLoginRedirectUrl(this.props.location.pathname);
    }
    return (
        <Route {...rest} render={props => {
          return isLogged
              ? <Component {...props} />
              : <Redirect to="/login" />
        }} />
    )
  }
}
export default AuthorizedRoute

Définition de l'itinéraire Informations

Les informations de routage sont également très simples. Utilisez uniquement AuthorizedRoute pour définir les itinéraires qui doivent être connectés pour être affichés.

import React from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Layout from '../pages/layout/Layout'
import Login from '../pages/login/Login'
import AuthorizedRoute from './AuthorizedRoute'
import NoFound from '../pages/noFound/NoFound'
import Home from '../pages/home/Home'
import Order from '../pages/Order/Order'
import WorkOrder from '../pages/Order/WorkOrder'
export const Router = () => (
    <BrowserRouter>
      <p>
        <Switch>
          <Route path="/login" component={Login} />
          <Redirect from="/" exact to="/login"/>{/*注意redirect转向的地址要先定义好路由*/}
          <AuthorizedRoute path="/layout" component={Layout} />
          <Route component={NoFound}/>
        </Switch>
      </p>
    </BrowserRouter>
)

La page de connexion

consiste à supprimer l'adresse stockée dans Redux. Après une connexion réussie, accédez-y. Sinon, accédez à la page par défaut. , je passe par défaut à la page d'accueil. Parce que le formulaire antd est utilisé, le code est un peu long. Il suffit de regarder les deux phrases reliant redux et le contenu dans handleSubmit.

import React from 'react'
import './Login.css'
import { login } from '../../mock/mock'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.isLogging = false;
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.isLogging = true;
        login(values).then(() => {
          this.isLogging = false;
          let toPath = this.props.toPath === '' ? '/layout/home' : this.props.toPath
          this.props.history.push(toPath);
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
        <Form onSubmit={this.handleSubmit.bind(this)} className="login-form">
          <FormItem>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
                <Input prefix={<Icon type="user" style={{ color: &#39;rgba(0,0,0,.25)&#39; }} />} placeholder="Username" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
                <Input prefix={<Icon type="lock" style={{ color: &#39;rgba(0,0,0,.25)&#39; }} />} type="password" placeholder="Password" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
                <Checkbox>Remember me</Checkbox>
            )}
            <a className="login-form-forgot" href="">Forgot password</a>
            <Button type="primary" htmlType="submit" className="login-form-button"
                loading={this.isLogging ? true : false}>
              {this.isLogging ? 'Loging' : 'Login'}
            </Button>
            Or <a href="">register now!</a>
          </FormItem>
        </Form>
    );
  }
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
const loginState = ({ loginState }) => ({
  toPath: loginState.toPath
})
export default withRouter(connect(
    loginState
)(WrappedNormalLoginForm))

Au fait, parlons ici de l'utilisation de redux. Pour le moment, je n'utiliserai essentiellement que la méthode  : définir le réducteur, définir les actions, créer un magasin, puis connecter redux lorsque j'ai besoin d'utiliser des variables redux. Lorsque j'ai besoin de dispatcher pour modifier les variables, Je vais présenter directement les méthodes dans actions , il suffit de l'appeler directement. Afin de faire correspondre les noms d'événements dans les actions et le réducteur, j'ai créé un actionsEvent.js pour stocker les noms d'événements par crainte des fautes de frappe et d'une modification facile ultérieurement.
réducteur :

import * as ActionEvent from '../constants/actionsEvent'
const initialState = {
  toPath: ''
}
const loginRedirectPath = (state = initialState, action) => {
  if(action.type === ActionEvent.Login_Redirect_Event) {
    return Object.assign({}, state, {
      toPath: action.toPath
    })
  }
  return state;
}
export default loginRedirectPath

actions :

import store from '../store'
import * as ActionEvent from '../constants/actionsEvent'
export const setLoginRedirectUrl = (toPath) => {
  return store.dispatch({
         type: ActionEvent.Login_Redirect_Event,
        toPath: toPath
       })
}

Créer un magasin

import { createStore, combineReducers } from 'redux'
import loginReducer from './reducer/loginReducer'
const reducers = combineReducers({
  loginState: loginReducer //这里的属性名loginState对应于connect取出来的属性名
})
const store = createStore(reducers)
export default store

J'ai presque oublié de mentionner, reportez-vous à la classe de contrôle de routage AuthorizedRoute https://codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js Codez ici. Je pense que ce code est plutôt bon. Je ne savais pas comment le faire au début, mais je n'ai eu que quelques idées après l'avoir compris.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de la méthode de saut angulaire+routerlink

Explication détaillée des étapes de stockage de surveillance dynamique vuex+localstorage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!