本文目录一览：

想做web前端开发师，可是不知道要学习些什么知识

这次给大家带来怎样使用react router4+redux实现路由权限控制，使用react router4+redux实现路由权限控制的注意事项有哪些，下面就是实战案例，一起来看一下。

react项目案例（react高阶组件案例）react项目案例（react高阶组件案例）


react项目案例（react高阶组件案例）


总体概述

一个完善的路由系统应该是这样子的，当链接到的组件是需要登录后才能查看，要能够跳转到登录页，然后登录成功后又跳回来之前想访问的页面。这里主要是用一个权限控制类来定义路由路由信息，同时用redux把登录成功后要访问的路由地址给保存起来，登录成功时看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 (

{

return isLogged

?

:

}} />

)

}

}

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

{/注意redirect转向的地址要先定义好路由/}

)登录页

就是把存在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.prntDefault();

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 (

{getFieldDecorator('userName', {

rules: [{ required: true, message: 'Please input your username!' }],

})(

)}

{getFieldDecorator('password', {

rules: [{ required: true, message: 'Please input your Password!' }],

})(

)}

{getFieldDecorator('remember', {

valuePropName: 'checked',

initialValue: true,

})(

Remember me

)}

Forgot password

{this.isLogging ? 'Loging' : 'Login'}

Or register now!

);

}

}

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 loginRedirectPathactions:

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相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

阅读：

使用JS判断字符串中包含内容方法总结

Angular+RouterLink做出不同的花式跳转

本篇文章主要介绍的一个 React小白 ，从 0 使用 umi 搭建 React 项目的过程，记录了相关 umi 的使用以及 react 的相关知识点~