怎么在react中使用router4+redux实现路由权限控制

今天就跟大家聊聊有关怎么在react中使用router4+redux实现路由权限控制，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

路由权限控制类

在这个方法里面，通过sessionStorage判断是否登录了，如果没有登录，就保存一下当前想要跳转的路由到redux里面。然后跳转到我们登录页。

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

路由定义信息

路由信息也很简单。只是对需要登录后才能查看的路由用AuthorizedRoute定义。

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>       <div>         <Switch>           <Route path="/login" component={Login} />           <Redirect from="/" exact to="/login"/>{/*注意redirect转向的地址要先定义好路由*/}           <AuthorizedRoute path="/layout" component={Layout} />           <Route component={NoFound}/>         </Switch>       </div>     </BrowserRouter> )

登录页

就是把存在redux里面的地址给取出来，登录成功后就跳转过去，如果没有就跳转到默认页面，我这里是默认跳到主页。因为用了antd的表单，代码有点长，只需要看连接redux那两句和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: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />             )}           </FormItem>           <FormItem>             {getFieldDecorator('password', {               rules: [{ required: true, message: 'Please input your Password!' }],             })(                 <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 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))

顺便说一下这里redux的使用吧。我暂时只会基本使用方法：定义reducer，定义actions,创建store，然后在需要使用redux的变量时候去connect一下redux，需要dispatch改变变量时，就直接把actions里面的方法引入，直接调用就可以啦。为了让actions和reducer里面的事件名称对的上，怕打错字和便于后面修改吧，我建了个actionsEvent.js来存放事件名称。
reducer:

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

创建store

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

看完上述内容，你们对怎么在react中使用router4+redux实现路由权限控制有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。