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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP中常用的魔术方法
2017/04/28 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
用python制作游戏外挂
2018/01/04 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Django admin组件的使用
2020/10/24 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
应届护士推荐信
2013/11/16 职场文书
电工工作职责范本
2014/02/22 职场文书
保护母亲河倡议书
2014/04/14 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
组织委员竞选稿
2015/11/21 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书