React使用Context API鉴权时持续重定向到登录页问题

实现目标 #

开发路由拦截逻辑，阻止未授权用户访问受保护页面。

已完成开发步骤 #

• 编写AuthProvider.js文件：通过createContext创建初始值为空对象的AuthContext，在AuthProvider组件中使用useState声明auth状态与setAuth更新方法，通过AuthContext.Provider向子组件暴露{ auth, setAuth }上下文。
• 封装useAuth.js自定义钩子：内部调用useContext获取AuthContext实例并返回，简化组件上下文调用逻辑。
• 编写RequireAuth.js路由守卫组件：通过useAuth获取auth状态，通过useLocation获取当前路由信息，校验auth.token是否存在：存在则渲染<Outlet />展示受保护子路由，不存在则通过<Navigate />组件重定向到/auth登录页，同时携带当前路由信息用于登录后回跳。
• 配置App.js路由：使用BrowserRouter包裹路由体系，将/auth登录页、/reg注册页设置为公开路由，将/home首页设置为受保护路由，嵌套在RequireAuth守卫下。
• 配置index.js入口文件：使用AuthProvider包裹根App组件，保证全局可共享鉴权上下文。
• 编写Login登录组件：通过useAuth获取setAuth方法，用户提交登录表单时调用后端接口拿到token，调用setAuth({ token })更新全局鉴权状态。

异常表现 #

1. 首次登录成功拿到token调用setAuth后，控制台同步打印auth与auth.token无法获取最新值，二次提交登录表单时才能打印出正确的token值。
2. 登录后尝试跳转/home路由时，会被RequireAuth守卫重定向回登录页；断点调试发现执行auth.token存在性校验时，auth状态未同步更新到最新值，手动给auth状态设置默认token值时，可以正常访问/home路由。

根因分析 #

两个异常本质是同一个问题：对React useState的异步更新特性理解有误。

• React 中useState返回的状态更新方法是异步批处理执行的，调用setAuth后，当前函数组件闭包内的auth变量不会立刻变更，只有组件完成重渲染后，新的闭包中才会拿到更新后的auth值。因此在调用setAuth的同步代码块中立刻打印auth，拿到的永远是更新前的旧值，第二次提交时第一次的状态更新已经完成重渲染，所以能拿到上一次存的token。
• 登录后跳转被拦截的核心原因是：跳转逻辑写在了setAuth调用的同步代码块中，状态还未完成更新、RequireAuth组件还没拿到最新的token值时就触发了路由跳转，守卫校验时读到的还是无token的旧状态，自然会判定未登录执行重定向。

修复方案 #

• 调用setAuth后不要立刻从当前闭包的auth变量中读取新值，接口返回的token先存在临时变量中供当前同步逻辑使用，不要依赖状态里的值。
• 登录成功后的跳转逻辑不要跟在setAuth后同步执行，两种改法二选一：
  • 接口拿到token后，先调用setAuth({ token })，直接用临时存储的token判断登录成功，再执行跳转。
  • 单独写useEffect监听auth.token变化，当auth.token存在时再执行跳转、回跳逻辑，保证跳转触发时全局状态已经更新完成，守卫可以读到正确的token值。
• 额外校验点：确认useAuth钩子返回上下文后，RequireAuth和Login组件中正确解构了需要的值，比如写const { auth, setAuth } = useAuth()，避免因解构错误导致读到的auth是undefined。

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