So verwenden Sie React Router4 + Redux, um die Routing-Berechtigungssteuerung zu implementieren

Dieses Mal zeige ich Ihnen, wie Sie React Router4 + Redux verwenden, um die Routing-Autoritätskontrolle zu implementieren. Was sind die Vorsichtsmaßnahmen für die Verwendung von React Router4 + Redux, um die Routing-Autoritätskontrolle zu implementieren? . 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
       })
}

Shop 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 glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter: Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel!

Empfohlene Lektüre:

Eine Zusammenfassung der Methode zur Verwendung von JS zur Bestimmung des in einer Zeichenfolge enthaltenen Inhalts

Angular +RouterLink macht einen anderen Fancy Jump

Das obige ist der detaillierte Inhalt vonSo verwenden Sie React Router4 + Redux, um die Routing-Berechtigungssteuerung zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!