在登錄頁面上反應受保護的路由問題而無需注銷重定向

Question

我正在構建具有反應保護路由 jwt 身份驗證的反應登錄應用程序我的登錄組件工作正常但是當我轉到儀表板並手動更新網址時，它重定向我的登錄頁面而無需注銷。

  const PrivateRoute = ({ component: Component, ...rest }) => {  
    //const auth = useSelector(state => state.auth)   
    let auth =   localStorage.getItem('token')   
    const [isAuthenticated, setIsAuthenticated] = useState(null) 

    useEffect(() => {
        let token = localStorage.getItem('token')
            if(token){
                let tokenExpiration = jwtDecode(token).exp;
                let dateNow = new Date();
                   console.log(tokenExpiration)
                if(tokenExpiration < dateNow.getTime()/1000){
                    setIsAuthenticated(false)
                }else{
                    setIsAuthenticated(true)
                }
            } else {
               setIsAuthenticated(false)
            }
        // eslint-disable-next-line   }, [auth])

      if(isAuthenticated === null){
        return <></>   }

      return (
        <Route {...rest} render={props =>
          !isAuthenticated ? (
            <Redirect to='/login'/>
          ) : (
          )
        }
      />   ); };

Answer 1

請嘗試以下代碼。 您可以使用私有路由單獨文件

私有路由.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
export const PrivateRoute = ({ component: Component, ...rest }) => {

    return (
        <React.Fragment>
        <Route {...rest} render={props => (
            localStorage.getItem('token')
                ? <Component {...props} />
                : <Redirect to={{ pathname: '/login'}} />
        )} />
        </React.Fragment>
    )
}

路由.js

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';
import Login from './components/Login/Login'
import { PrivateRoute } from "./PrivateRoute";
import Dashboard from "./components/Home/Dashboard";
import Notfound from './Notfound';

class Routes extends Component {

  render() {

    return (
        <React.Fragment>

        <Switch>
            <PrivateRoute exact path="/" component={Dashboard} label="Home"/>
            <Route path="/login" component={Login} />
            <Route path="*" component={Notfound} />
        </Switch>

        </React.Fragment>
    )
  }
}

export default Routes;