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>
    }

      

      



      

  • 相关阅读:
    OpenWRT Mac 虚拟机PD 分享 for 软路由
    How to write u disk from img in mac os x
    linux find file > 100 M
    gojs for data flow
    正则表达式
    grep
    搜索引擎Query Rewrite
    Kafka replication
    cassandra写数据CommitLog
    Solr DIH JDBC 源码解析
  • 原文地址:https://www.cnblogs.com/lisiyang/p/12851257.html
Copyright © 2011-2022 走看看