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>
  1. 宁波PLM

    文章顶一下

  2. PDM 系统

    说明文啊,支持楼主

  3. 化简为凡

    作者博客做的不错,支持一下

  4. fanlion

    博主有路由使用browserHistory的教程吗

  5. 11

    很好

  6. 嘿嘿
    手痒,试下注入!
  7. 嘿嘿嘿嘿
    alert('这样呢');
  8. 啦啦啦

    万一需要检验token是否过期呢?

  9. 11111

    alert("1111")
    </script>

  10. 啦啦啦
    alert('test');
  11. test

    会不会变大

  12. test

    这就尴尬了。。。。

  13. 特殊阿斯顿test

    有什么好尴尬的,人家用了markdown

  14. test

    我试试

  15. test

    en

  16. s'd'f

    对方的

  17. s'd'f

    sfa

  18. 123
    test
  19. test

    hello

  20. Mc黑总

    tyui

  21. 啊啊宁波PLM

    啊啊

支持 MarkDown 代码, Html 标签