zoukankan      html  css  js  c++  java
  • React 登陆鉴权路由设置

    主文件:

            <HashRouter >
              <ErrorBoundry>
                <Suspense fallback={Loading()}>
                  <Switch>
    
                    <Route exact path="/login" component={Login}/>
                    {/* 要经过登录验证的页面都要使用PrivateRoute包装 */}
                    <PrivateRoute exact path="/" component={Home1}/>
                    <PrivateRoute path="/user" component={User1}/>
    
                    <PrivateRoute path="/detail/:id" component={Detail}/>
                    <Route path="*" component={NotFound}/>
                  </Switch> 
                </Suspense>
              </ErrorBoundry>
            </HashRouter>

    PrivateRoute:

     
    const PrivateRoute = (props) => {
        const { user: { isLogin , isAdmin} , component: Cmp , ...rest } = this.props;
        const pathname = this.props.location.pathname; // 从哪儿来
        const NCmp = HFhoc(Cmp);
        return isLogin ? // 如果是已经登录的状态 去其他界面 应该就是对应的界面
    
          <Route 
            {...rest}
            render = {props => {
              return <NCmp {...props}/>
            }}
          />
          :
          <Redirect to={{
            pathname:'/login',
            state: pathname
          }}/> 
    }

    Login:

    const Login = () => {
    
    
      if (user.isLogin) {
    
          return <Redirect to={pathname} />
        }
    
    return <div>Login</div>
    }

      

      



      

  • 相关阅读:
    ESB企业服务总线
    OpenStack的架构详解[精51cto]
    用MSBuild和Jenkins搭建持续集成环境(1)[收集]
    Hmac算法
    自定义JDBCUtils工具类
    读取JDBC配置文件的二种方式
    哈希算法
    BouncyCastle
    签名算法
    3种查看java字节码的方式
  • 原文地址:https://www.cnblogs.com/lisiyang/p/12851257.html
Copyright © 2011-2022 走看看