根据登录状态切换Header按钮时Redux状态刷新重置问题

用Redux存储loggedIn状态实现Header按钮切换的方案完全合理，你遇到的页面刷新后状态重置问题，不是方案选型错误，是Redux的固有运行特性导致的：Redux的所有状态都保存在当前页面的JS运行时内存中，页面刷新会清空运行时内存，状态自然会回到你定义的初始默认值false，这个问题和你使用JWT做身份认证的架构不冲突。

• 持久化存储JWT凭证：用户登录成功拿到JWT后，不要只把登录状态存在Redux里，要同步把JWT存储在localStorage/sessionStorage，或者安全性更高的HttpOnly Cookie中。
• 应用初始化时恢复状态：在项目入口的启动逻辑里，先从存储位置读取JWT，校验Token存在且未过期的话，主动触发登录状态同步的action，把Redux中的loggedIn更新为true之后再渲染页面，就能避免刷新后按钮状态显示错误的问题。
• 简化实现可选方案：如果不想手写状态持久化和恢复的逻辑，可以引入redux-persist库，配置需要持久化的Redux字段，库会自动完成状态和本地存储的同步、应用启动时的状态注水，不用手动写读取和状态更新逻辑，注意不要把敏感信息全量持久化，只保留必要的登录标识、非敏感用户信息即可。

注意：不要仅依赖本地存储的loggedIn布尔值做权限判断，登录态校验始终要以有效JWT为核心依据，所有鉴权接口请求都要携带JWT，拿到后端返回的401未授权响应时，要同步清空本地存储的凭证、重置Redux的登录状态为未登录，做好异常场景兜底。

内容的提问来源于stack exchange，提问作者João Queiroz