React PWA中使用MSAL JS弹窗登录出现间歇性hash_empty_error异常

BrowserAuthError: hash_empty_error 的触发机制为：MSAL 弹窗登录模式下，会等待认证服务回跳至指定redirectUri后，从URL的hash片段中提取授权码、ID令牌、认证错误信息等核心数据；当检测到回跳完成后目标URL的hash值为空，无有效参数可解析时，就会抛出该报错。
结合现有现象，触发原因可定位为三类场景：

• 路由层提前清空hash：React 生产环境（PWA模式+BrowserRouter）的路由初始化逻辑会自动清空URL上的hash值。从报错信息中的Given Url: https://siteinspection-dev.azurewebsites.net/login可判断，弹窗回跳后路由引擎先完成了路径跳转、hash清除操作，才轮到MSAL执行hash解析逻辑，直接导致读取到空值。
• 缓存状态上下文不匹配：当前配置使用sessionStorage作为缓存位置、开启storeAuthStateInCookie: true，但弹窗登录场景下，弹窗页面与主页面的sessionStorage是完全隔离的。当存在上次登录中断残留的状态标记（如缓存中残留的已完成登录状态、过期的PKCE校验值），MSAL会误判流程已走完，直接跳过等待hash的环节，读取空hash触发报错——这也完全匹配“清理浏览器存储后登录恢复正常”的现象。
• 配置项不一致：全局auth配置的redirectUri为window.location.origin，但单条loginRequest的redirectUri为硬编码的BaseUrl，若两者路径存在格式差异（如末尾斜杠、携带路径段），会导致回跳路径与MSAL预期的处理路径错配，路由提前清hash后触发解析失败。

• 路由层做hash保护：在React Router初始化逻辑的最前端增加判断，若当前URL hash中包含id_token、code、error等MSAL认证返回的特征参数，暂停执行路由的hash清空操作，等待MSAL完成hash提取、令牌校验后，再允许路由跳转。
• 对齐配置项一致性：
  • 统一全局auth.redirectUri与loginRequest.redirectUri的取值，全部复用window.location.origin，移除硬编码的BaseUrl，避免路径错配。
  • 将cacheLocation从sessionStorage调整为localStorage，解决弹窗与主窗口sessionStorage隔离导致的状态不匹配问题；保留storeAuthStateInCookie: true的配置，保证跨上下文的状态同步。
• 流程兜底优化：
  • 调用loginPopup前，先执行一次myMSALObj.handleRedirectPromise()，提前处理上次登录流程残留的未解析hash内容，避免残留状态干扰新的登录流程。
  • 增加异常捕获分支：识别到hash_empty_error报错时，自动清除所有以msal.为前缀的本地缓存键，无需用户手动清理浏览器存储即可自动重试登录。

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