Vue3 Router hash模式下MSAL登录重定向404问题

开发Vue3应用时，使用Vue Router hash模式集成MSAL实现Azure AD登录遇到路由冲突问题：

• Azure AD redirect_uris 不支持带fragment的地址，因此将redirect_uri配置为应用首页，同时开启navigateToLoginRequestUrl配置
• 登录完成后AAD本应跳转至my_host/#code=...<AAD响应内容>地址，但Vue Router自动介入将URL改写为my_host/#/code=...<AAD响应内容>，该路径无法匹配已有路由，直接触发404错误
• 开发环境配置的redirectUri为http://localhost:8080，MSAL服务封装代码如下：

import * as msal from '@azure/msal-browser';

export default class msalAuth {
  constructor(config) {

    const msalConfig = {
      auth : {
        clientId : config.clientId,
        authority : config.authority,
        redirectUri : config.redirectUrl,
        navigateToLoginRequestUrl : true
      },
      cache : {
        cacheLocation : 'localStorage',
        storeAuthStateInCookie : true
      },
      system: { 
        loggerOptions: {    
            loggerCallback: (level, message, containsPii) => {  
                if (containsPii) {      
                    return;     
                }       
                switch (level) {        
                    case msal.LogLevel.Error:       
                        console.error(message);     
                        return;     
                    case msal.LogLevel.Info:        
                        console.info(message);      
                        return;     
                    case msal.LogLevel.Verbose:     
                        console.debug(message);     
                        return;     
                    case msal.LogLevel.Warning:     
                        console.warn(message);      
                        return;     
                }   
            }   
        }   
      }
    };
    
    let graphScopes = Object.values(config.graphScopes);
    let state = window.location.origin;
    let postLogoutRedirectUri = config.logoutRedirect;
    let graphUrl = config.graphUrl;

    this.msalAppConfig = {
      graphScopes,
      state,
      loginRequest: {
        scopes: graphScopes,
        state
      },
      postLogoutRedirectUri,
      graphUrl
    };

    this.app = new msal.PublicClientApplication(msalConfig);

    
  }

  login() {
    
    this.app.loginRedirect(this.msalAppConfig.loginRequest);

  }

  logout(userName) {
    
    const logoutRequest = {
      account : this.app.getAccountByUsername(userName),
      postLogoutRedirectUri : this.msalAppConfig.postLogoutRedirectUri,
      mainWindowRedirectUri : this.msalAppConfig.postLogoutRedirectUri
    }

    this.app.logoutPopup(logoutRequest);
    
  }

  async handleRedirectPromise() {
    return await this.app.handleRedirectPromise();
  }

  processRedirectResponse(response) {
    let accountId = '';
    
    console.log('processRedirectResponse', response);
    if (response) {
      accountId = response.account.homeAccountId;
      // Display signed-in user content, call API, etc.
    } else {
      // In case multiple accounts exist, you can select
      const currentAccounts = this.app.getAllAccounts();

      if (currentAccounts.length === 0) {
          // no accounts signed-in, attempt to sign a user in
          //this.loginRedirect();
      } else if (currentAccounts.length > 1) {
          // Add choose account code here
          accountId = currentAccounts[0].homeAccountId;
      } else if (currentAccounts.length === 1) {
          accountId = currentAccounts[0].homeAccountId;
      }
    } 

    return accountId;
  }

}

待解答的两个核心疑问：

1. 是否必须切换为history路由模式才能解决该问题？hash模式下是否有可行的适配方案？
2. 是否应该使用loginPopup方法替代当前的loginRedirect方法来规避该问题？

不需要强制切换history模式，hash模式有成熟适配方案 #

问题核心是Vue Router初始化时默认接管hash段解析，AAD回跳时会自动在hash内容前补/导致路径匹配失败，完全没必要切换路由模式，按以下步骤适配即可：

• 调整初始化顺序：必须在Vue Router初始化之前调用handleRedirectPromise处理AAD回跳响应，不要等路由挂载后再走鉴权逻辑。如果等Vue Router完成hash改写再处理，MSAL就拿不到正确的code、state参数。正确执行顺序为：应用启动 → 初始化MSAL实例 → 调用handleRedirectPromise解析hash中的鉴权参数 → 解析完成后清理URL中的鉴权hash段 → 再初始化Vue Router、挂载Vue应用。
• 增加路由兜底规则：给Vue Router加优先级高于404的通配规则，匹配到/code=*开头的异常路径时直接重定向到首页，避免触发404，示例配置：

const routes = [
  // 原有业务路由
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  // 兜底匹配AAD回跳被改写的路径
  {
    path: '/code=:rest(.*)*',
    redirect: '/'
  },
  // 404路由放在最后
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/404.vue')
  }
]

• 按需关闭自动跳转：如果不需要MSAL自动跳转到登录前页面，可以把navigateToLoginRequestUrl设为false，在handleRedirectPromise拿到登录成功响应后，手动调用router.replace()跳转到目标页面，进一步减少URL冲突概率。

可以用loginPopup规避问题，但要结合场景选择 #

loginPopup确实能绕开路由冲突问题，但不是最优解，需要结合业务场景判断是否适用：
loginPopup通过独立弹窗完成AAD认证，全程不会改动当前主页面的URL，自然不会和Vue Router的hash处理逻辑冲突，改造成本极低。但它有两个明显限制：

• 部分广告拦截插件、高安全级别的企业浏览器会直接拦截认证弹窗，容易出现用户点击登录无响应的问题
• 移动端浏览器对弹窗的适配普遍较差，容易出现弹窗卡死、回退失效的问题，移动端用户占比高的场景不推荐使用

如果你的用户以PC端内部用户为主、浏览器环境可控，用popup方案最省事；如果是面向公网、多端适配的应用，还是优先选前面的hash模式适配redirect方案，兼容性更稳定。

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