React中如何结合localStorage实现登录功能及跳转控制

1. 登录成功后的存储与跳转逻辑 #

登录接口校验账号密码通过后，先往localStorage写入登录状态标识，再执行页面跳转：

// 登录请求成功后的回调函数
function afterLoginSuccess(userData) {
  // 存储登录状态与用户信息，敏感信息存储前需做加密处理
  localStorage.setItem('login_status', 'valid')
  localStorage.setItem('user_info', JSON.stringify(userData))
  // 跳转至指定目标页
  window.location.href = '/health'
}

注：不要在localStorage中存储明文密码、身份证号这类高度敏感的信息

2. 全局登录状态校验逻辑 #

所有需要登录权限的页面，都需要在初始化阶段先校验登录状态，未登录直接跳转登录页：

// 全局登录校验函数，可放在公共JS文件中所有页面统一引入
function authCheck() {
  const currentPage = window.location.pathname
  // 登录页本身跳过校验，避免死循环跳转
  if (currentPage === '/login') return
  // 读取本地存储的登录标识
  const loginStatus = localStorage.getItem('login_status')
  // 未匹配到有效登录标识则跳转登录页
  if (!loginStatus || loginStatus !== 'valid') {
    window.location.href = '/login'
  }
}
// 页面加载时立即执行校验
authCheck()

如果使用Vue、React等单页框架，直接将上述校验逻辑放在全局路由守卫中执行即可，无需每个页面单独引入。

3. 登出逻辑配套处理 #

用户触发登出操作时，要清空本地存储的登录相关内容，再跳转登录页：

function handleLogout() {
  // 清空所有登录相关存储字段
  localStorage.removeItem('login_status')
  localStorage.removeItem('user_info')
  // 跳转登录页
  window.location.href = '/login'
}

异常情况排查 #

如果未达到预期效果，优先核对以下几点：

• 登录成功后是否成功写入了localStorage，可打开浏览器开发者工具-应用-本地存储，查看对应域名下的字段是否存在
• 权限校验逻辑是否在所有受保护的页面都成功执行，有没有遗漏页面引入
• 校验逻辑是否排除了登录页，避免出现登录页也触发校验导致的反复跳转死循环
• 所有页面需在同一个域名下，localStorage为域名隔离存储，跨域名无法读取对应内容

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