如果令牌过期，如何将用户重定向到不同的路径

Question

我正在为一个项目制作一个简单的网站，如果令牌过期，我想将玩家重定向到登录页面，但我真的不确定如何正确地执行，以下是我尝试过的，我使用react jwt检查令牌

function App() {
return (
<div style={{display:'flex', flexDirection:'column', height:'100vh'}}>
<Navbar/>
<div style={{display:'flex', flex:1}}>
<Routes>
<Route path="/login" element ={<LoginForm/>} />
<Route path="/signUp" element ={<SignUpForm/>} />
<Route path="/addMovie" element= {<AddMovie/>} />
<Route path="/" element={isExpired(localStorage.getItem('token') ? <FilmList/> : <LoginForm/> )} />
<Route path="/details" exact element ={<MovieDetails/>} />
</Routes>
</div>
</div>
);
}

或者类似的东西

<Route path="/" 
render={props=>{
if(isExpired(localStorage.getItem('token'))){
return <Navigate to='/login'/>;
}
return <FilmList/>
}}
/>

第一个没有返回任何内容，第二个在控制台中发出警告：

在位置匹配的叶路由"/"没有元素。这意味着它将在默认情况下呈现具有null值的，从而导致"空"；页

有办法让它发挥作用吗？

Answer 1

在react-router-domv6中，没有自定义路由组件，而Route组件必须在element道具上具有有效的ReactElement。函数不正确。您的第二个片段已接近。

创建AuthWrapper以有条件地为嵌套路由或重定向呈现Outlet。

const AuthWrapper = () => {
return isExpired(localStorage.getItem('token')
? <Navigate to="/login" replace />
: <Outlet />;
};

将要保护的任何路由包裹到Route中，以呈现AuthWrapper。

function App() {
return (
<div style={{display:'flex', flexDirection:'column', height:'100vh'}}>
<Navbar />
<div style={{display:'flex', flex:1}}>
<Routes>
<Route path="/login" element={<LoginForm />} />
<Route path="/signUp" element={<SignUpForm />} />
<Route path="/addMovie" element={<AddMovie />} />
<Route element={<AuthWrapper />}>
<Route path="/" element={<FilmList />} />
</Route>
<Route path="/details" element={<MovieDetails />} />
</Routes>
</div>
</div>
);
}

Answer 2

一种解决方案是使用react-router-dom中的Redirect组件。

Fo进入FilmList组件，并在渲染部分进行以下检查：

if (isExpired(localStorage.getItem('token')){
return <Redirect to='/login' />
}

在您返回"正常"FilmList之前

对于不支持重定向的RRDv6，您可以使用导航组件：

if (isExpired(localStorage.getItem('token')){
return <Navigate to='/login' replace={true} />
}