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

      

      



      

  • 相关阅读:
    移动端轮播插件
    一个简单的富文本编辑器
    animation css3
    渐变的写法
    js拖拽功能
    打子弹游戏 js
    css-vertical-centering
    css3的linear-gradient
    js模拟滚动条
    js日历
  • 原文地址:https://www.cnblogs.com/lisiyang/p/12851257.html
Copyright © 2011-2022 走看看