react router4+redux实现路由权限控制的方法

总体概述

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