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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php导入模块文件分享
2015/03/17 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP7 弃用功能
2021/03/09 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JS中递归函数
2016/06/17 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
python 队列详解及实例代码
2016/10/18 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python urllib和urllib3知识点总结
2021/02/08 Python
自荐信怎么写好
2013/11/11 职场文书
兼职学生的自我评价
2013/11/24 职场文书
顶岗实习接收函
2014/01/09 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
全国道德模范事迹
2014/02/01 职场文书
责任心演讲稿
2014/05/14 职场文书
文艺晚会策划方案
2014/06/11 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书