Реагировать на защищенный маршрут Проблема без перенаправления выхода из системы на странице входа - PullRequest
Новая
       43

Реагировать на защищенный маршрут Проблема без перенаправления выхода из системы на странице входа

0 голосов
/ 10 февраля 2020

я создаю приложение реакции входа в систему с помощью реакции защищенного маршрута jwt authnetication Мой компонент входа работает нормально, но когда я go выхожу на панель мониторинга и обновляю URL вручную, он перенаправляет меня на страницу входа без выхода из системы. 

  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'/>
          ) : (
          )
        }
      />   ); };

1 Ответ

0 голосов
/ 10 февраля 2020

Пожалуйста, попробуйте следующий код. Вы можете использовать отдельный файл отдельного маршрута

PrivateRoute. 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;
...