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

【问题标题】：How to redirect user to a diferent path if token is expired如果令牌过期，如何将用户重定向到不同的路径
【发布时间】：2022-01-18 16:17:29
【问题描述】：

我正在为一个项目创建一个简单的站点，如果令牌过期，我想将玩家重定向到登录页面，但我不确定如何正确执行，这是我尝试过的，我使用 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/>
}}
/>

第一个什么都不返回，第二个在控制台发出警告：

位置“/”的匹配叶路由没有元素。这个意味着默认情况下它将呈现一个空值，从而导致 “空”页。

有没有办法让它工作？

【问题讨论】：

标签： javascript reactjs jwt react-router-dom

【解决方案1】：

在react-router-dom v6 中，自定义路由组件消失了，Route 组件必须在 element 属性上具有有效的 ReactElement。函数不正确。您的第二个 sn-p 已接近。

创建一个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>
  );
}

【讨论】：

【解决方案2】：

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

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

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

在您返回“正常”之前FilmList

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

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

【讨论】：

当我尝试使用时，我得到“尝试导入错误：'Redirect' 不是从 'react-router-dom' 导出的。”
RRDv6 不导出Redirect 组件。