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中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
JAVA面试题 static关键字详解
Jul 16 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制作静态网站的模板框架
2006/10/09 PHP
PHP实现文件安全下载
2006/10/09 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php数组编码转换示例详解
2014/03/11 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Django Rest framework权限的详细用法
2019/07/25 Python
python能开发游戏吗
2020/06/11 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Java程序员常见面试题
2015/07/16 面试题
供货协议书范本
2014/04/22 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
教师演讲稿开场白
2014/08/25 职场文书
酒店端午节活动方案
2014/08/26 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
同学聚会通知书
2015/04/20 职场文书
2015年材料员工作总结
2015/04/30 职场文书
个人工作决心书
2015/09/22 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
python单元测试之pytest的使用
2021/06/07 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle