react路由拦截

// 登录拦截，没有路由守卫这个东西，需要拦截的话，可以自己去封装 Route

import React from "react";
import ReactDOM from 'react-dom'
import {
  HashRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from "react-router-dom";

////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time

const AuthExample = () => (
  
    

      
      

        

          公共页面
        
        

          需要登录验证的页面
        
        {/* 

          登录页面
        
 */}
      

      
      
      {/* PrivateRoute 自定义 的路由组件实现路由拦截功能  通过将props,path="/protected" component={Protected}传过去*/}
      

    
  
);

const fakeAuth = {
    // fakeAuth登录的对象集合
  isAuthenticated: false, // 登录状态

  // 登录方法
  authenticate(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100); // fake async
  },

  // 退出登录方法
  signout(cb) {
    this.isAuthenticated = false;
    setTimeout(cb, 100);
  }
};
// withRouter 方法重新包装router
const AuthButton = withRouter(
  ({ history }) =>
  // 登录状态 登录了就显示退出, 没有登录就显示没有登录
    fakeAuth.isAuthenticated ? (
      

        Welcome!{" "}
         {
              //  函数式路由跳转
            fakeAuth.signout(() => history.push("/"));
          }}
        >
          退出登录
        
      
    ) : (
      
You are not logged in.
    )
);

// 自己对 Route 组件做的一个封装。（高阶组件）
// props.path
// props.component

// rest = { path: '/protected' }
// 自己定义的一个Router组件,来实现路由拦截功能
// component: Component,将props中的component解构赋值出来并且实施重命名,应为下面是要作为组件使用
// ...rest 是接受剩下的元素
const PrivateRoute = ({ component: Component, ...rest }) => (
  
        // 登录对象集合中的登录状态
      fakeAuth.isAuthenticated ? (
          // 为true 就显示该组件
        
      ) : (
        
      )
    }
  />
);

const Public = () => 
公共页面
;
const Protected = () => 
需要登录的页面
;
//登录页面
class Login extends React.Component {
  state = {
      // 登录状态
    redirectToReferrer: false
  };

  login = () => {
      // 点击登录时触发登录方法
    fakeAuth.authenticate(() => {
        // 将redirectToReferrer登录状态转变为true
      this.setState({ redirectToReferrer: true });
    });
  };

  render() {
      // 解构赋值到 from  有传递过来想去的页面就去这个页面   没有的话就去 /
    const { from } = this.props.location.state || { from: { pathname: "/" } };
    const { redirectToReferrer } = this.state;

    // 如果登录状态为true 就重定向到from页面
    if (redirectToReferrer) {
      return ;
    }

    return (
      

        
你还没有权限需要先登录 {from.pathname}
        登录
      
    );
  }
}

// export default AuthExample;
ReactDOM.render(, document.getElementById('root'))