React从react-router路由上做登陆验证控制的方法


Posted in Javascript onMay 10, 2018

本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:

验证代码

import React from 'react'
import {connect} from 'react-redux';

function requireAuthentication(Component) {
 // 组件有已登陆的模块 直接返回 (防止从新渲染)
 if (Component.AuthenticatedComponent) {
  return Component.AuthenticatedComponent
 }

 // 创建验证组件
 class AuthenticatedComponent extends React.Component {
  static contextTypes = {
   router: React.PropTypes.object.isRequired,
  }

  state = {
   login: true,
  }

  componentWillMount() {
   this.checkAuth();
  }

  componentWillReceiveProps(nextProps) {
   this.checkAuth();
  }

  checkAuth() {

   // 判断登陆
   const token = this.props.token;
   const login = token ? token.login : null;


   // 未登陆重定向到登陆页面
   if (!login) {
    let redirect = this.props.location.pathname + this.props.location.search;
    this.context.router.push('/login?message=401&redirect_uri=' + encodeURIComponent(redirect));
    return;
   }

   this.setState({login});
  }

  render() {
   if (this.state.login) {
    return <Component {...this.props}/>
   }
   return ''
  }
 }

 // 不使用 react-redux 的话直接返回
 // Component.AuthenticatedComponent = AuthenticatedComponent
 // return Component.AuthenticatedComponent


 function mapStateToProps(state) {
  return {
   token: state.token,
  };
 }

 function mapDispatchToProps(dispatch) {
  return {};
 }
 Component.AuthenticatedComponent = connect(mapStateToProps, mapDispatchToProps)(AuthenticatedComponent);
 return Component.AuthenticatedComponent
}

路由上使用

<Router history={browserHistory}>
 <Route path="/admin" component={requireAuthentication(AdminComponent)} />
</Router>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
详解Angular路由之路由守卫
May 10 #Javascript
JavaScript实现一个简易的计算器实例代码
May 10 #Javascript
浅谈node.js 命令行工具(cli)
May 10 #Javascript
Js经典案例的实例代码
May 10 #Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 #Javascript
vuex与组件联合使用的方法
May 10 #Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 #Javascript
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jquery使用经验小结
2015/05/20 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
办公室主任职责范文
2013/11/08 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
出纳员岗位责任制
2014/02/11 职场文书
三八节主持词
2014/03/17 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
法制宣传日活动总结
2014/04/29 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js