使用React路由到私有路由，它首先呈现错误的路由.如何解决这个问题

Question

我正在为应用程序编写一个私有路由，并试图在刷新应用程序后让用户登录。为了解决这个问题，我创建了一个函数，通过useEffect中的checkAuthenticated函数来检查保存在localStorage中的用户是否有效，该函数将jwtoken提取到服务器并相应地设置isAuthenticated状态。

我的问题是，每次刷新时，它都会呈现Login路由，然后使用登录用户重新路由到Main组件。(Main也是一个内部有其他路由的Switch，它默认为主路由，所以我失去了刷新前的位置，但这是一个不同的问题：s

我也尝试过通过redux做所有事情，因为我的用户信息处于redux状态。verify道具是一个与checkAuthenticated相同的操作，isValid是一个等效于isAuthenticated的布尔值。

这是我的应用程序组件的示例。有人能帮我解决这个问题吗？

const App = ({ user, verify, isValid }) => {
const [ isAuthenticated, setIsAuthenticated ] = useState(false);
useEffect( () => {
console.log("USEEFFECT RUNS")
checkAuthenticated();
}, [])
return (
<BrowserRouter>
<Switch>
<Route
exact
path="/login"
render={(props) =>
isAuthenticated ? <Redirect to="/" /> : <LoginComponent {...props} setAuth={setIsAuthenticated}/>
}
/>
<Route
path="/"
component={ () =>
isAuthenticated ? <Main /> : <Redirect to="/login" />
}
/>
</Switch>
</BrowserRouter>
);
};

Answer 1

首先，我强烈建议不要使用localStorage来跟踪用户是否经过身份验证，因为它远非安全，而且是可编辑的客户端。相反，我建议使用http cookie：https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

首次呈现应用程序时，isAuthenticated等于false。这会导致路由重定向到登录页面。在检查localStorage并确认JWT令牌后，isAuthenticated将设置为true，重新绘制组件，并显示正确的页面。这就是你的应用程序将要走的路，这就是为什么我相信你在刷新时会首先获得登录页面，即使你已经通过了身份验证。

潜在的"；"黑客"；已修复此问题。原因可能是将isAuthenticated设置为null，然后根据JWT令牌检查的结果设置为true/false。在渲染中，检查isAuthenticated是否为null(===(，如果不是，则检查false/true。

总之，你需要知道"；没有检查JWT"已检查：没有JWT"；，以及"；已检查：确认JWT"；。