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

 

  

  



  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM