Detailed explanation of login verification control steps for React from react-router route

This time I will bring you a detailed explanation of the login verification control steps of React from react-routerrouting, and a detailed explanation of the login verification control steps of React from react-routerNotesThere are Which ones, the following are practical cases, let’s take a look.

Verification code

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
}

Use on routing

<Router history={browserHistory}>
 <Route path="/admin" component={requireAuthentication(AdminComponent)} />
</Router>

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

React routing management React Router usage steps detailed explanation

Analysis of Vue.js download method and usage steps

The above is the detailed content of Detailed explanation of login verification control steps for React from react-router route. For more information, please follow other related articles on the PHP Chinese website!