Detaillierte Erläuterung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+Redux

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+Redux geben. Was sind die Vorsichtsmaßnahmen für die Steuerung von Routing-Berechtigungen mit React Router4+Redux? Werfen wir einen Blick darauf.

Übersicht

So sollte ein komplettes Routingsystem aussehen. Wenn die verknüpfte Komponente angemeldet sein muss, kann sie angezeigt werden und es muss möglich sein, zu ihr zu springen Öffnen Sie die Anmeldeseite und springen Sie nach erfolgreicher Anmeldung zu der Seite zurück, die Sie zuvor besucht haben. Hier verwenden wir hauptsächlich eine Berechtigungskontrollklasse, um Routing-Informationen zu definieren und gleichzeitig Redux zu verwenden, um die Routing-Adresse zu speichern, auf die nach erfolgreicher Anmeldung zugegriffen werden soll Überprüfen Sie, ob in Redux eine Adresse vorhanden ist. Wenn keine Adresse gespeichert ist, springen Sie zur Standard-Routing-Adresse.

Routing-Berechtigungskontrollklasse

Bei dieser Methode verwenden Sie sessionStorage, um festzustellen, ob Sie angemeldet sind. Wenn Sie nicht angemeldet sind, speichern Sie die aktuelle Route, die Sie verwenden möchten Springe zum Redux in. Dann springen Sie zu unserer Login-Seite.

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

Routendefinition InformationenRouteninformationen sind ebenfalls sehr einfach. Verwenden Sie AuthorizedRoute nur zum Definieren von Routen, für deren Anzeige eine Anmeldung erforderlich ist.

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>
)

Anmeldeseite

Nach erfolgreicher Anmeldung springen Sie zur Standardseite ist die Standardeinstellung, um zur Startseite zu springen. Da die antd-Form verwendet wird, ist der Code etwas lang. Sie müssen sich nur die beiden Sätze ansehen, die Redux und den Inhalt in handleSubmit verbinden.

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))

Lassen Sie uns hier übrigens über die Verwendung von Redux sprechen. Im Moment verwende ich grundsätzlich nur die

-Methode: Reduzierer definieren, Aktionen definieren, Speicher erstellen und dann Redux verbinden, wenn ich Redux-Variablen verwenden muss. Ich werde die Methoden direkt in Aktionen einführen, einfach direkt aufrufen. Um die Ereignisnamen in Aktionen und Reduzierern abzugleichen, habe ich aus Angst vor Tippfehlern und einer späteren einfachen Änderung eine actionsEvent.js erstellt, um die Ereignisnamen zu speichern.

Reduzierer:

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

Aktionen:

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

Speicher erstellen

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

Ich hätte es fast vergessen zu erwähnen, die Routing-Kontrollklasse AuthorizedRoute ist eine Referenz

https: //

codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js Code hier. Ich finde, dass dieser Code ziemlich gut ist. Ich wusste zunächst nicht, wie man ihn macht, aber einige Ideen kamen mir erst, nachdem ich ihn verstanden hatte.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zusammenfassung der Angular+Routerlink-Sprungmethode

Detaillierte Erläuterung der Schritte der Vuex+localstorage-Dynamik Überwachung des Speichers

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Steuerung von Routing-Berechtigungen mit React Router4+Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!