我正在构建一个MERN Web应用程序，遇到了一个问题：当我使用现有帐户登录时，在调用API到后端并处理请求之后，它返回用户属性和JWT令牌，我保存它，然后（使用导航功能）我将用户重定向到主页。它工作正常，但当我重新加载页面时就不行了。我的意思是，在页面的第一次加载中，登录工作正常，导航功能也是如此。但是当我重新加载页面并输入登录数据时，它确实登录了，但没有将我重定向到主页。我希望这是可以理解的！这是进行API调用和重定向的代码片段：
Login.js
const handleSubmit = async (event) => {
event.preventDefault()
try {
const res = await axios.post(WEB_URL + `/login`, { email, password })
// console.log(res.data);
const { token } = res.data.token;
localStorage.setItem('jwt', token);
// console.log('logged as', res.data.user.name);
navigate("/");
}
catch (error) {
console.log(error);
navigate("/login");
}
};App.js
const PrivateRoute = () => {
const token = localStorage.getItem('jwt');
return !!token;
};
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={PrivateRoute() ? <Home /> : <Navigate replace to="/login" />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
</Router>
);
}
1条答案
按热度按时间w6mmgewl1#
问题
这里的问题是，当
App呈现时，它调用PrivateRoute函数，并正确返回false，因为没有用户登录，并且呈现了<Navigate>组件。路由器正确导航到
"/login"，呈现Login组件，用户通过身份验证并导航回"/"。由于没有更新App的状态、属性或父组件，因此App组件不会重新呈现，也不会重新检查localStorage中的令牌。这意味着<Navigate>组件仍然呈现，用户被弹回到"/login"。溶液
使
PrivateRoute成为***实际***React组件，以便在路由更改时呈现/重新呈现该组件，并且它可以重新检查localStorage中的令牌。示例：
在呈现主页的布局路线上呈现
PrivateRoute。