> 웹 프론트엔드 > JS 튜토리얼 > React는 반응 라우터 라우팅에서 로그인 확인 제어를 어떻게 구현합니까?

React는 반응 라우터 라우팅에서 로그인 확인 제어를 어떻게 구현합니까?

php中世界最好的语言
풀어 주다: 2018-05-30 13:57:46
원래의
3728명이 탐색했습니다.

这次给大家带来React怎样在react-router路由实现登陆验证控制,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>
로그인 후 복사

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

React路由跳转方法汇总

React路由管理与React Router使用详解

위 내용은 React는 반응 라우터 라우팅에서 로그인 확인 제어를 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿