React使用Protected Routes鉴权时刷新受保护页跳转登录页问题

useContext和useReducer存储的状态是保存在浏览器运行内存中的临时状态，页面刷新/重载时整个React应用会重新执行挂载流程，所有内存中的状态都会被重置为你定义的initialvalue默认值（也就是未登录状态）。此时ProtectedRoutes组件读取到未登录的状态值，就会自动触发跳转回登录页。

核心思路是把登录状态做持久化存储，让应用初始化时能读取到刷新前的登录状态，具体实现步骤如下：

• 选择浏览器持久化存储方案：长期保持登录选localStorage，关闭浏览器即失效选sessionStorage，认证凭证优先使用后端下发的HttpOnly Cookie（避免XSS攻击窃取敏感信息）。
• 修改useReducer初始化逻辑，优先读取本地存储的登录状态作为初始值，而不是直接使用硬编码的未登录初始值。
• 在登录、退出的reducer处理逻辑中，同步更新本地存储的状态，保证内存状态和持久化存储状态一致。

代码示例 #

1. 改造状态初始化逻辑

// 初始化时优先读取本地持久化的登录状态
const getInitialAuthState = () => {
  const savedLoginState = localStorage.getItem('isUserLoggedIn')
  return {
    isLoggedIn: savedLoginState ? JSON.parse(savedLoginState) : false,
    userInfo: savedLoginState ? JSON.parse(localStorage.getItem('userInfo')) : null
    // 可根据业务扩展其他用户相关字段
  }
}

// 替换原来的固定initialvalue
const [userstate, dispatch] = useReducer(reducer, getInitialAuthState())

2. 改造reducer逻辑，同步操作持久化存储

const reducer = (state, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS': {
      // 登录成功时同步写入本地存储
      localStorage.setItem('isUserLoggedIn', JSON.stringify(true))
      localStorage.setItem('userInfo', JSON.stringify(action.payload.userInfo))
      return {
        ...state,
        isLoggedIn: true,
        userInfo: action.payload.userInfo
      }
    }
    case 'LOGOUT': {
      // 退出登录时清除本地存储的登录相关数据
      localStorage.removeItem('isUserLoggedIn')
      localStorage.removeItem('userInfo')
      return {
        ...state,
        isLoggedIn: false,
        userInfo: null
      }
    }
    default:
      return state
  }
}

优化建议 #

• 纯前端存储的登录布尔值可以被用户手动篡改，生产环境建议在应用挂载时增加登录态校验接口请求，拿后端返回的真实登录态做判断，同时可以加全局初始化loading状态，等校验完成再渲染路由，避免出现短暂的登录页闪烁问题。
• 敏感认证Token不要存在localStorage/sessionStorage中，优先使用带HttpOnly、Secure、SameSite属性的Cookie存储，从根源上降低XSS攻击导致的凭证泄露风险。

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