使用msal-browser v2.37.1+Nuxt3/Vue3时多Query参数触发state_mismatch错误

问题现象 #

在Nuxt3/Vue3环境使用msal-browser v2.37.1时，多数访问场景正常，比如访问https://test.com或https://test.com/user/2?page=profile无异常。但只要添加额外Query参数（例如https://test.com/user/2?page=profile&section=identification），就会抛出以下错误：

ClientAuthError: state不匹配：State不匹配错误。请检查你的网络。持续请求可能导致缓存溢出。
在ClientAuthError2.AuthError2 [作为构造函数]处抛出

仅添加一个额外参数就会触发问题，手动在请求配置中添加state参数无效，进一步排查发现serverResponseHash与cachedState不匹配。

解决方案 #

• 统一URL参数处理逻辑：Nuxt3的SSR场景下，服务端和客户端的URL Query参数可能存在不一致，导致msal生成state时的URL和回调时的URL不匹配。建议在msal初始化前，统一截取当前URL的基础路径（忽略额外Query参数）来生成state，确保前后端使用的URL基准一致。
• 自定义固定格式的state：不要依赖msal自动生成的state，手动生成包含路由核心信息的state，排除易变的额外Query参数。示例代码：

  const loginRequest = {
    scopes: ["user.read"],
    // 仅用路径生成state，忽略额外Query参数
    state: btoa(window.location.pathname)
  };
  msalInstance.loginRedirect(loginRequest);
  

• 调整缓存配置：将msal的cache.config中cacheLocation设置为localStorage（默认是sessionStorage），避免页面刷新或路由跳转时缓存的state丢失或错乱。
• 检查路由中间件：如果有自定义路由中间件在msal认证前修改了URL Query参数，会导致state生成的基准URL和回调后的URL不一致。确保中间件在msal认证完成后再处理额外Query参数。
• 升级msal版本：v2.37.1可能存在state匹配的已知bug，尝试升级到最新的v2.x稳定版，或考虑迁移到msal-browser v3版本，查看官方是否已修复该问题。

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