React中如何通过清除历史记录实现登出防止回退到登录后页面

问题原因 #

使用 history.push('/') 跳转时，会在浏览器历史栈中新增一条首页记录，登出前的登录后页面记录仍保留在历史栈中，因此用户点击返回按钮即可回到之前的登录态页面。

可行解决方案 #

两种方案配合使用可实现完整防护：

• 方案1：跳转时替换历史栈，而非新增记录
  登出逻辑中跳转首页时，将history.push替换为history.replace，该方法会直接替换当前历史栈的最新记录，登出前的登录态页面不会保留在历史栈中，用户点击返回不会再回到对应页面。
  示例代码：

  // 登出逻辑
  const handleLogout = () => {
    // 先清除所有登录态
    localStorage.removeItem('token')
    localStorage.removeItem('userInfo')
    // 用replace跳转替换当前历史记录
    history.replace('/')
  }
  

• 方案2：新增全局路由鉴权拦截，做双保险
  即使历史栈中残留了登录态页面记录，用户点击返回访问对应路径时，通过路由守卫判断登录态，未登录则直接拦截跳回首页。

  React Router v6 实现示例 #

  封装鉴权路由组件RequireAuth：

  import { Navigate, Outlet } from 'react-router-dom';
  
  const RequireAuth = () => {
    // 替换为你项目实际的登录态判断逻辑
    const isAuthenticated = !!localStorage.getItem('token');
    return isAuthenticated ? <Outlet /> : <Navigate to="/" replace />;
  };
  

  路由配置时将所有需要登录才能访问的路由嵌套在该组件下：

  import { Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 所有需要鉴权的路由都放在下面 */}
        <Route element={<RequireAuth />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile" element={<Profile />} />
        </Route>
      </Routes>
    );
  }
  

  React Router v5 实现示例 #

  封装私有路由组件PrivateRoute：

  import { Route, Redirect } from 'react-router-dom';
  
  const PrivateRoute = ({ component: Component, ...rest }) => {
    const isAuthenticated = !!localStorage.getItem('token');
    return (
      <Route
        {...rest}
        render={(props) =>
          isAuthenticated ? <Component {...props} /> : <Redirect to="/" replace />
        }
      />
    );
  };
  

  路由配置时使用该组件替代默认Route声明需要鉴权的路由：

  import { Switch, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Switch>
        <Route exact path="/" component={Home} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <PrivateRoute path="/profile" component={Profile} />
      </Switch>
    );
  }
  

内容的提问来源于stack exchange，提问作者sumit mehra