Reactjs 反应路由器JWT保护路由

我在laravel上有一个react应用程序，其中我有一个使用jwt auth的自定义登录屏幕。我在本地存储中设置了一个令牌，但如果未登录，我会尝试保护和重定向路由。问题是在呈现路由之前检查令牌。我尝试过的每一件事，最终都陷入了一个巨大的循环。请帮忙。这是我的app.jsx

require('./bootstrap');

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import Login from './components/auth/login';
import Header from './components/header/';
import store from './store';
import Dashboard from './pages/dashboard';
import jwtDecode from 'jwt-decode';
import { PropsRoute, PublicRoute, PrivateRoute } from 'react-router-with-props';


let getToken = () =>{

  var auth = false;
  var token = localStorage.getItem('toobiauth')

  if(token){
    var tokenExpiration = jwtDecode(token).exp;
    var dateNow = new Date();

    if(tokenExpiration < dateNow.getTime()/1000){
        auth = false
    }else{
        auth = true
    }
  }else{
    auth = false
  }
  return auth;

}


ReactDOM.render((
  <Provider store={store}>
       <Router>
         <Header>
           <Switch> 
             <Route exact path='/' component={Login} />
             <Route exact path='/login' component={Login} />
             <PrivateRoute exact path="/dashboard" authed={getToken()} redirectTo="/login" component={Dashboard}/>
           </Switch>
           </Header>
       </Router>
    </Provider>
   ), document.getElementById('app'))

require（'./bootstrap'）；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“React”导入React，{Component}；
从“react dom”导入react dom；
从“react redux”导入{Provider}
从“./components/auth/Login”导入登录名；
从“./components/Header/”导入标题；
从“./store”导入存储；
从“./pages/Dashboard”导入仪表板；
从“jwt decode”导入jwtDecode；
从'react router with props'导入{PropsRoute，PublicRoute，PrivateRoute}；
让getToken=（）=>{
var-auth=false；
var token=localStorage.getItem（'toobiauth'）
如果（令牌）{
var tokenExpiration=jwtDecode（token）.exp；
var dateNow=新日期（）；
if（tokenExpiration

这是我的登录名

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch, connect } from "react-redux";
import Submit from '../ui/buttons/submit';
import Textfield from '../ui/inputs/textfield';
import {loginUser} from '../../actions/authactions';
import jwtDecode from 'jwt-decode';


function login(props) {

    const auth = useSelector(state => state.auth)
    const [username, setUsername] = useState();
    const [password, setPassword] = useState();

    const submitLogin = () =>{
        props.dispatch(loginUser(username, password))
    }

    useEffect(() =>{
        var token = localStorage.getItem('toobiauth')

        if(token){
            var tokenExpiration = jwtDecode(token).exp;
            var dateNow = new Date();

            if(tokenExpiration < dateNow.getTime()/1000){
                console.log('expired');
            }else{
                props.history.push('/dashboard')
                console.log('login screen')
            }
        }

    },[auth]);


    return <div className="page_wrapper">
        <Textfield type="text" change={setUsername}/>
        <Textfield type="password" change={setPassword}/>
        <Submit action={submitLogin} width={'100%'}/>
    </div>;
}

const mapStateToProps = (state) =>{
    return {
      app: state.app,
    }
}

export default connect(mapStateToProps)(login);

import React，{useState，useffect}来自“React”；
从“react-redux”导入{useSelector，useDispatch，connect}；
从“../ui/buttons/Submit”导入提交；
从“../ui/inputs/Textfield”导入Textfield；
从“../../actions/authactions”导入{loginUser}；
从“jwt decode”导入jwtDecode；
功能登录（道具）{
const auth=useSelector（state=>state.auth）
const[username，setUsername]=useState（）；
const[password，setPassword]=useState（）；
const submitLogin=（）=>{
发送道具（登录用户（用户名、密码））
}
useffect（（）=>{
var token=localStorage.getItem（'toobiauth'）
如果（令牌）{
var tokenExpiration=jwtDecode（token）.exp；
var dateNow=新日期（）；
if（tokenExpiration{
返回{
app:state.app，
}
}
导出默认连接（MapStateTops）（登录）；

您可以定义自己的PrivateRoute.jsx，在该组件中，您可以检查用户是否经过身份验证，然后允许用户路由受保护的路由，或者将用户重定向到登录路由

PrivateRoute.jsx

import React，{useffect，useState}来自“React”；
从“react router dom”导入{Route，Redirect}
从“react redux”导入{useSelector}；
const privaterout=（{component:component，…rest}）=>{
const auth=useSelector（state=>state.auth）
常量[isAuthenticated，setIsAuthenticated]=useState（null）
useffect（（）=>{
let token=localStorage.getItem（'toobiauth'）
如果（令牌）{
让tokenExpiration=jwtDecode（token）.exp；
设dateNow=新日期（）；
if（tokenExpiration
);
};
导出默认私有路由；

App.js

从'react Router dom'导入{BrowserRouter as Router，Switch，Route}；
从“React”导入React，{Component}；
从“react dom”导入react dom；
从“react redux”导入{Provider}
从“./components/auth/Login”导入登录名；
从“./components/Header/”导入标题；
从“./store”导入存储；
从“./pages/Dashboard”导入仪表板；
//导入上面代码块中定义的新PrivateRoute组件
从“./components/PrivateRoute”导入PrivateRoute
从“jwt decode”导入jwtDecode；
ReactDOM.render((
)，document.getElementById（'app'））

您可以定义自己的PrivateRoute.jsx，在该组件中，您可以检查用户是否经过身份验证，然后允许用户路由受保护的路由，或者将用户重定向到登录路由

PrivateRoute.jsx

import React，{useffect，useState}来自“React”；
从“react router dom”导入{Route，Redirect}
从“react redux”导入{useSelector}；
const privaterout=（{component:component，…rest}）=>{
const auth=useSelector（state=>state.auth）
常量[isAuthenticated，setIsAuthenticated]=useState（null）
useffect（（）=>{
let token=localStorage.getItem（'toobiauth'）
如果（令牌）{
让tokenExpiration=jwtDecode（token）.exp；
设dateNow=新日期（）；
if（tokenExpiration
);
};
导出默认私有路由；

App.js

从'react Router dom'导入{BrowserRouter as Router，Switch，Route}；
从“React”导入React，{Component}；
从“react dom”导入react dom；
从“react redux”导入{Provider}
从“./components/auth/Login”导入登录名；
从“”导入标题。