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 相关文章推荐
利用location.hash实现跨域iframe自适应
May 04 Javascript
Javascript 面向对象 继承
May 13 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
详解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
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
js中this对象用法分析
2018/01/05 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
python del()函数用法
2013/03/24 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
上班早退检讨书
2014/01/09 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年度培训工作总结
2014/11/27 职场文书
党委工作总结2015
2015/04/27 职场文书
工作时间证明
2015/06/15 职场文书
单位提档介绍信
2015/10/22 职场文书
Go并发4种方法简明讲解
2022/04/06 Golang