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))
顺便说一下这里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
差点忘记说了,路由控制类AuthorizedRoute参考了https://codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js 这里的代码。感觉这份代码挺不错的,我一开始不会做就是看懂它才有点思路。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 原创 | 实战:R环境下Echart的8种可视化
- Yarn(MapReduce 2.0)下分布式缓存(DistributedCache)的注意事项
- Yaffs_guts(三)
- 浅谈 python multiprocessing(多进程)下如何共享变量
- 文件地址映射之yaffs_GetTnode
- bash/shell 解析命令行参数工具:getopts/getopt
- ssh 双机互信:免密码登录设置步骤及常见问题
- yaffs_guts(一)
- 聊聊 Java 中 HashMap 初始化的另一种方式
- 基于 Hive 的文件格式:RCFile 简介及其应用
- MapReduce 计数器简介
- 流水线乘法器
- Hive 基础(2):库、表、字段、交互式查询的基本操作
- 玩转 Linux 之:磁盘分区、挂载知多少?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法