使用msal-browser弹窗登录遇hash_does_not_contain_known_properties错误求助

核心原因 #

该错误是由于移动端浏览器中，vue-router提前修改了URL的hash值，导致msal无法识别登录回调返回的hash参数。

具体解决方案 #

1. 确保vue-router在msal处理完登录回调后再跳转 #

弹窗登录成功后，先完成msal的响应处理，再执行路由跳转，避免router提前篡改hash：

// 弹窗登录逻辑
msalInstance.loginPopup(loginRequest)
  .then(response => {
    // 先确认msal已处理完登录响应
    if (response.account) {
      // 再执行路由跳转
      router.push('/dashboard');
    }
  })
  .catch(error => {
    console.error('登录失败:', error);
  });

2. 检查并统一重定向URI配置 #

• 确认Azure门户中注册的重定向URI与msal配置完全一致，必须包含Vue hash模式的完整路径：https://vue-msal-browser.netlify.app/#/sign-in
• msal配置中同步该URI：

const msalConfig = {
  auth: {
    clientId: '你的客户端ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'https://vue-msal-browser.netlify.app/#/sign-in'
  }
};

3. 禁用msal的自动跳转配置 #

关闭msal自动跳转回登录前URL的功能，避免与vue-router的hash处理冲突：

const msalConfig = {
  auth: { /* 已有配置 */ },
  system: {
    navigateToLoginRequestUrl: false
  }
};

4. 避免sign-in页面提前触发路由跳转 #

在/sign-in页面中，不要在组件初始化时直接跳转，需先检查并等待msal处理登录回调：

<script setup>
import { useRouter } from 'vue-router';
import msalInstance from '@/path/to/msalInstance';

const router = useRouter();

onMounted(async () => {
  // 检查URL中是否包含msal登录回调的hash参数
  const hash = window.location.hash;
  if (hash.includes('code=') || hash.includes('id_token=')) {
    // 让msal先处理回调
    await msalInstance.handleRedirectPromise();
  }
  // 再根据登录状态决定是否跳转
  const currentAccount = msalInstance.getActiveAccount();
  if (currentAccount) {
    router.push('/dashboard');
  }
});
</script>

5. 升级msal-browser版本 #

当前使用的@azure/msal-browser@2.38.0存在移动端hash处理的已知兼容性问题，升级到v2.42.0及以上稳定版本可修复部分场景的bug。

内容的提问来源于stack exchange，提问作者Satria Budi Apriansyah