MSAL Angular获取认证令牌时页面多次重载问题求助

问题场景 #

使用MSAL获取认证令牌时遇到页面多次重载，通过APP_INITIALIZER处理认证逻辑，清除所有令牌后重新加载页面，控制台输出的导航序列如下：

1. 导航至http://localhost:4200/myPage
   • 控制台显示：initialize, handleRedirectPromise, getAllAccounts
2. 导航至login.microsoftonline.com页面
3. 导航至http://localhost:4200
   • 控制台显示：initialize, handleRedirectPromise
4. 导航至http://localhost:4200/myPage
   • 控制台显示：initialize, handleRedirectPromise
   • 随后出现两次acquireTokenSilent调用失败的错误
   • 接着显示：setActiveAccount, initialize, handleRedirectPromise
5. 导航至http://localhost:4200
   • 推测此前的initialize/handleRedirectPromise日志来自此次导航，仅顺序错乱
6. 导航至http://localhost:4200/myPage
   • 控制台显示：initialize, handleRedirectPromise, setActiveAccount

疑问：步骤3、4、5为何会发生？

相关代码 #

export const provideAzure = () => makeEnvironmentProviders([
    {
        provide: APP_INITIALIZER,
        useFactory: (msalService: MsalService, msalBroadcastService: MsalBroadcastService) => async () => {
            console.info('initialize')
            await publicClientApplication.initialize()

            console.info('handleRedirectPromise')
            const redirect = await msalService.instance.handleRedirectPromise()

            if (redirect?.account) {
                console.info('setActiveAccount')
                msalService.instance.setActiveAccount(redirect.account)
            } else {
                console.info('getAllAccounts')
                const accounts = msalService.instance.getAllAccounts()

                if (accounts.length > 0) {
                    console.info('setActiveAccount')
                    msalService.instance.setActiveAccount(accounts[0])
                }
            }
        },
        multi: true,
        deps: [MsalService, MsalBroadcastService]
    },
    {provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true},
    MsalService,
    MsalGuard
])

使用版本 #

• @azure/msal-angular 3.0.4
• @azure/msal-browser 3.10.0
• Angular 16.1.2

原因分析 #

步骤3（跳转至根路由） #

MSAL默认配置的重定向URI为http://localhost:4200，登录流程完成后会自动跳转到这个默认地址，这是导致步骤3的直接原因。你的初始访问地址是/myPage，但MSAL未保留原路由信息，因此先回到根路由。

步骤4（跳转回/myPage） #

这是MsalGuard的作用：根路由未配置登录守卫，而/myPage需要认证。当你回到根路由后，守卫检测到已完成登录，会自动重定向到最初请求的/myPage。

• acquireTokenSilent失败是因为此时activeAccount尚未设置（日志显示还未执行setActiveAccount），MSAL静默获取令牌时找不到有效账户，导致失败。
• 随后执行setActiveAccount是因为handleRedirectPromise返回了登录后的账户信息，但之前的页面重载触发了APP_INITIALIZER的重复执行，所以出现了重复的initialize/handleRedirectPromise日志。

步骤5（再次跳转至根路由） #

这次跳转是MSAL内部重定向逻辑的残留，或是acquireTokenSilent失败后MSAL尝试重新触发认证流程，但此时已存在活跃账户，导致再次跳转到根路由；随后MsalGuard再次将页面重定向到/myPage（步骤6）。

代码优化建议 #

1. 避免重复初始化：MsalService已封装初始化逻辑，无需手动调用publicClientApplication.initialize()，直接使用msalService.instance即可，重复初始化会导致状态混乱。
2. 恢复原路由：在handleRedirectPromise成功后，利用redirect.state保存并恢复原路由，避免不必要的跳转：

// 需注入Router
if (redirect?.account) {
    msalService.instance.setActiveAccount(redirect.account);
    const state = redirect.state as { target?: string };
    if (state?.target) {
        router.navigate([state.target]);
    }
}

3. 配置重定向URI：确保MSAL配置中的redirectUri与业务需求匹配，或在登录请求中指定state参数携带原路由信息。

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