MSAL令牌验证后无法重定向至请求URL问题排查

清除缓存后直接访问localhost:4200/create时，页面会被重定向至Microsoft令牌验证流程，但验证成功后并未跳转到请求的create页面，而是跳转至home页面。

路由模块代码 #

{
  path: '',
  loadChildren: () => import('src/home').then((m) => {
    return m.home;
  }),
},
{
  path: 'create',
  loadChildren: () => import('src/createpage').then((m) => {
    return m.createpage;
  }),
},

当前MSAL配置 #

auth: {
    clientId: 'clientID',
    authority: 'authority',
    // redirectUri: 'redirectUri'),
    redirectUri: window.location.origin,
    navigateToLoginRequestUrl: true,
    protectedResourceMap: 'protectedResourceMap',
    postLogoutRedirectUri: 'postLogoutRedirectUri'
},

之前的MSAL配置 #

auth: {
    clientId: 'clientID',
    authority: 'authority',
    // redirectUri: 'redirectUri'),
    redirectUri: 'localhost:4200/home',
    navigateToLoginRequestUrl: true,
    protectedResourceMap: 'protectedResourceMap',
    postLogoutRedirectUri: 'postLogoutRedirectUri'
},

解决步骤 #

1. 修正redirectUri格式
   直接写localhost:4200/home缺少http/https协议头，会导致MSAL解析地址出错。改为带完整协议的地址（比如http://localhost:4200），或确保window.location.origin在页面加载时能正确返回带协议的根路径。

2. 检查路由守卫逻辑
   确认保护create页面的路由守卫（如MSAL的MsalGuard）是否在跳转登录前，将当前请求的路由地址存入登录状态。可以手动在守卫中添加state: { redirectUrl: 当前路由路径 }，确保登录回调能读取该值跳转。

3. 确认navigateToLoginRequestUrl生效
   检查登录请求的state参数是否包含原始页面地址。如果没有，可能是MSAL初始化时机晚于路由初始化，或守卫未正确传递跳转信息，需要调整MSAL初始化顺序。

4. 重定向页面的跳转处理
   如果有专门的登录回调页面，要确保该页面在获取MSAL登录结果后，根据state中的原始路径跳转，而不是固定跳转到home页。

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