React Private Route Redirect 条件被忽略

Question

每次我在令牌过期后尝试导航到某个页面时，都不会被重定向到我的登录页面。理想情况下，我希望在我的令牌过期后被重定向到我的登录页面。我的状态变量在令牌过期时会更新，但在呈现重定向组件时会被忽略。我认为我的私人路线可能写错了。

App.js

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import LandingPage from './pages/LandingPage';
import ViewAllRecipe from './pages/ViewAllRecipe';
import AddRecipe from './pages/AddRecipe';
import EditRecipe from './pages/EditRecipe';
import SingleRecipe from './pages/SingleRecipe';
import axios from 'axios';

var status;

async function validToken(){
  var token = localStorage.getItem('token');
    try{
    const res = await axios.post('/api/auth/verify',
        {token: token},
        {headers: {'Content-Type': 'application/json'}},        
        );
     if(res.data.status===200){
       status = 200;
    }
    else{
      localStorage.removeItem('token');
      status= 401;
    }   
      }
    catch(err){
      localStorage.removeItem('token');
      status=500;
    }
}


function PrivateRoute({ children, ...rest }) {
  validToken();
  return (
    <Route
      {...rest}
      render={() =>
      status!==200 ? (
          <Redirect
            to="/landing"
            
          />
        ):(
          children
        )
      }
    />
  );
}



function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/landing" component={LandingPage}></Route>
        <PrivateRoute exact path="/addRecipe" component={AddRecipe}></PrivateRoute>
        <PrivateRoute exact path="/viewRecipes" component={ViewAllRecipe}></PrivateRoute>
        <PrivateRoute exact path="/recipe/edit/:editRecipe"  component={(props) => <EditRecipe {...props}/>}></PrivateRoute>
        <PrivateRoute exact path="/recipe/view/:id"  component={(props) => <SingleRecipe {...props}/>}></PrivateRoute>
      </Switch>
    </Router>
  );
}

export default App; ```

Answer 1

试试这个：

import React, { useState, useEffect } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';
import LandingPage from './pages/LandingPage';
import ViewAllRecipe from './pages/ViewAllRecipe';
import AddRecipe from './pages/AddRecipe';
import EditRecipe from './pages/EditRecipe';
import SingleRecipe from './pages/SingleRecipe';
import axios from 'axios';

async function getStatus() {
  var token = localStorage.getItem('token');
  try {
    const res = await axios.post(
      '/api/auth/verify',
      { token: token },
      { headers: { 'Content-Type': 'application/json' } },
    );
    if (res.data.status === 200) {
      return 200;
    } else {
      localStorage.removeItem('token');
      return 401;
    }
  } catch (err) {
    localStorage.removeItem('token');
    return 500;
  }
}

function PrivateRoute({ children, ...rest }) {
  const [status, setStatus] = useState(null);
  useEffect(() => {
    (async () => setStatus(await getStatus()))();
  }, []);

  return (
    status && (
      <Route
        {...rest}
        render={() => (status !== 200 ? <Redirect to="/landing" /> : children)}
      />
    )
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/landing" component={LandingPage}></Route>
        <PrivateRoute
          exact
          path="/addRecipe"
          component={AddRecipe}></PrivateRoute>
        <PrivateRoute
          exact
          path="/viewRecipes"
          component={ViewAllRecipe}></PrivateRoute>
        <PrivateRoute
          exact
          path="/recipe/edit/:editRecipe"
          component={props => <EditRecipe {...props} />}></PrivateRoute>
        <PrivateRoute
          exact
          path="/recipe/view/:id"
          component={props => <SingleRecipe {...props} />}></PrivateRoute>
      </Switch>
    </Router>
  );
}

export default App;

使用 [] 作为第二个参数的 useEffect 仅在第一次渲染时被调用，它运行一个检查状态并使用该状态设置状态的函数。如果状态为空，则不会渲染任何内容，因为异步函数尚未运行，因此您不知道状态（您可以渲染加载）。当状态为状态时，它会触发状态中的重新渲染