React+Cognito Hosted UI认证后页面循环跳转问题排查与解决

场景还原 #

我基于React和Cognito Hosted UI做POC，用S3托管静态站点、CloudFront分发，路由用react-router-dom实现。认证流程是：

• 用户通过Cognito Hosted UI登录后，携带auth_code重定向到前端根路径/
• 前端调用API Gateway对接的Lambda接口，用auth_code交换JWT令牌并存入localStorage
• 令牌获取完成后跳转至/home页面

但实际运行时，认证完成后页面陷入无限循环跳转，控制台反复输出authCode: null，最终触发循环报错。

问题根因 #

根路由/的组件逻辑里，加了一段判断：如果localStorage中存在access_token，就直接执行history.replace('/home')。这段逻辑和auth_code的处理流程冲突了：

1. Cognito重定向回/时，URL里带了auth_code，但此时access_token还没生成，根路由判断用户未认证，留在/开始处理auth_code
2. 处理auth_code时会先从URL中取出参数，之后URL里就没有auth_code了
3. 但令牌交换是异步操作，在请求完成前，组件可能因为状态变化重新渲染，此时根路由的判断逻辑再次执行——因为access_token还没存入localStorage，所以继续留在/
4. 这时再去处理auth_code，因为URL里已经没有参数了，就会打印null，之后组件又重新渲染，反复循环直到报错

解决方案 #

直接删除根路由/中“判断localStorage存在access_token则跳转/home”的逻辑即可解决循环问题。

如果需要保留登录状态判断的逻辑，可以调整执行顺序：先完成auth_code的解析和令牌交换，再进行登录状态校验和跳转，避免异步流程导致的逻辑冲突。

内容的提问来源于stack exchange，提问作者Igor Eulálio