React登录时history.push仅第二个条件生效 管理员无法跳转后台页

问题根源 #

你的登录逻辑存在异步执行顺序错误：

• loginUser是基于Redux Toolkit创建的异步Thunk，dispatch(loginUser(login))触发后不会立刻执行localStorage写入逻辑，你紧接着读取的isAuth、isAdmin都是登录前的旧值（大概率为null），所以判断永远走else分支跳转到首页。
• Signin组件里定义的isAuth、isAdmin是组件初始化时读取的localStorage值，即使请求完成后localStorage更新，这两个变量也不会自动更新。

修复方案 #

1. 改造Signin.js的登录逻辑，等待异步请求完成后再判断跳转 #

将handleLogin改为异步函数，等待登录请求返回结果后，直接用返回的用户信息判断身份，无需读取本地存储的旧值：

// Signin.js 中修改handleLogin
const handleLogin = async (e) => {
  e.preventDefault();
  // 等待登录异步请求执行完成
  const resultAction = await dispatch(loginUser(login));
  const res = resultAction.payload;

  if (res?.user) {
    // 直接用接口返回的用户信息判断管理员身份
    if (res.user.isAuth) {
      history.push("/admin/home");
    } else {
      history.push("/");
    }
    // 可选：如果不需要强制刷新可以删掉下面这行，优化体验
    setTimeout(() => window.location.reload(), 1000);
  } else {
    // 可补充登录失败的提示逻辑
    alert("账号或密码错误，请重试");
  }
}

2. 可选优化：修复App.js路由不自动更新的问题 #

当前App.js中直接从localStorage读取权限标识，localStorage更新不会触发组件重新渲染，如果你去掉了上面的强制刷新逻辑，需要将App.js的权限判断改为从Redux状态读取：

// App.js 中修改权限读取逻辑
const user = useSelector(state => state.user.user);
const isAuth = !!user?.token;
const isAdmin = !!user?.isAuth;

3. 注意避坑 #

localStorage存储的所有值都是字符串类型，如果后端返回的isAuth是布尔值，存入localStorage后会变成"true"/"false"字符串，判断时不要直接用=== true，直接判断存在性即可。

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