React JS认证流程疑问：刷新后Redux存储的用户信息丢失该如何处理

不需要将完整的userInfo存入Cookie，该方案既存在安全风险，也会增加不必要的请求体积。可以按照以下逻辑实现你的需求：

核心实现逻辑 #

以Cookie中token的后端校验结果为唯一权限依据，搭配本地存储做渲染兜底，分步骤处理页面初始化逻辑：

• 应用首次加载/刷新时，优先读取Cookie中的token
  • 无token：直接放行到登录页
  • 有token：调用后端提供的token校验接口（或直接调用当前用户信息查询接口），接口请求成功则将返回的userInfo存入Redux，自动跳转至首页；接口返回401等失效状态则清空Cookie中的无效token，跳转至登录页

优化方案 #

如果不想每次刷新都让用户等待接口请求的加载态，可以增加本地持久化做渲染兜底：

• 用localStorage/sessionStorage存储非敏感的userInfo字段（用户名、头像地址等，禁止存储密码、身份证等敏感信息）
• 刷新时优先读取本地存储的userInfo渲染页面，同时异步调用后端接口校验token有效性、拉取最新的userInfo，更新Redux和本地存储的数据

注意：本地存储的userInfo仅作为渲染兜底使用，绝对不能作为权限校验的依据，所有权限判断必须以后端返回的接口结果为准，避免本地存储被恶意篡改后出现权限漏洞。

如果你不想自行编写持久化逻辑，也可以直接使用redux-persist库，配置时仅指定持久化userInfo对应的reducer，存储介质选择localStorage即可，注意仍然要保留全局的token校验逻辑，避免本地持久化数据和后端状态不一致。

不推荐将userInfo存入Cookie的原因 #

1. Cookie单条最大存储容量仅为4KB，若userInfo字段较多很容易超出上限，且Cookie会在每次HTTP请求时自动携带，会增加不必要的请求体积
2. Cookie存在被跨站脚本窃取的风险，存储非必要的用户信息会提升数据泄露的安全隐患

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