切换路由时React未重新执行App函数导致登录鉴权失效问题求助

问题根因 #

你的判断完全正确，App组件仅在首次加载时读取一次localStorage的登录状态，后续路由切换不会触发App组件重新执行，因此拿不到登录后的最新状态，自然不会加载已登录对应的路由配置。

最优解决方案：封装私有路由守卫 #

这是React路由鉴权的标准实现方式，代码复用性高，逻辑更清晰，不需要强制刷新页面：

1. 首先封装通用的私有路由组件，所有需要登录才能访问的页面都用这个组件包裹，每次路由匹配时都会自动读取最新的登录状态做判断

// 可以直接写在App.js顶部，也可以单独抽成公共组件文件
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const userInfo = localStorage.getItem("userInfo");
  const resultat = userInfo ? JSON.parse(userInfo) : null;
  const isLoginValid = resultat?.status === "ok";

  return (
    <Route
      {...rest}
      render={props =>
        isLoginValid ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

2. 重构App.js代码，删掉重复的路由判断逻辑，区分公开路由和私有路由即可

function App() {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Switch>
        {/* 公开路由：不需要登录即可访问 */}
        <Route path='/login' exact component={ Login } />
        {/* 私有路由：必须登录才能访问 */}
        <PrivateRoute path='/' exact component={ Dashboard } />
        <PrivateRoute path='/dashboard' exact component={ Dashboard } />
        <PrivateRoute path='/other_route' exact component={ OtherComponent } />
        {/* 兜底路由：匹配所有未定义的路径 */}
        <Route path='*'>
          <>
            You are not logged in. To see this page please, log in.
          </>
        </Route>
      </Switch>
    </Router>
  );
}

3. 调整Login组件的登录成功逻辑，不需要强制刷新，写入localStorage后直接跳转即可

import { useHistory } from 'react-router-dom';

function Login() {
  const history = useHistory();
  // 登录成功后的回调逻辑
  const handleLoginSuccess = (userData) => {
    // 先写入最新的用户信息到localStorage
    localStorage.setItem("userInfo", JSON.stringify({
      status: "ok",
      ...userData
    }));
    // 直接跳转到仪表盘，不需要刷新
    history.push("/dashboard");
  }

  // 剩下的登录表单、请求逻辑保持不变
}

其他可选方案（不推荐） #

如果你不想改动现有结构，也可以把登录状态存在App组件的useState响应式状态中，配合Context或者Redux等状态管理工具，登录成功后更新全局状态触发App重新渲染，但这种方式后续新增路由时要反复修改App的判断逻辑，维护成本更高。

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