Angular17中NgRx Effect结合MSAL保护资源时acquireTokenSilent失败

我在Angular 17应用中用NgRx结合MSAL 3.0实现Azure B2C认证，有一个需要认证的API端点，已配置在MSAL的受保护资源中：

protectedResources: [
....
{
  endpoint: 'https://jsonplaceholder.typicode.com/posts',
  scopes: ['opendid']
}
]

该端点用于NgRx Effect中加载帖子，以下是应用配置里的MsalInterceptorConfiguration：

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {

const protectedResources = (environment.protectedResources);
const protectedResourceMap = new Map<string, Array<string> | null>();

protectedResources.map(protectedResource => protectedResourceMap.set(protectedResource.endpoint, protectedResource.scopes));

return {
interactionType: InteractionType.Redirect,
protectedResourceMap,
authRequest: {
  forceRefresh: false
  }
 };
}

相关组件的路由和自定义守卫配置如下：

export const routes: Routes = [ 
{
  path: 'post',
  component: PostShellComponent,
  canActivate: [ApiAvailabilityGuard, MsalGuard],
}
];

export const ApiAvailabilityGuard: CanActivateFn = () => {
 console.log('ApiAvailabilityGuard returning, true');
 return of(true);
};

尝试加载帖子组件时，我本期望MSAL守卫触发登录重定向，但却出现错误：
@azure/msal-angular@3.0.21 : Error - Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.

对应的Effect代码：

@Injectable()
export class PostEffects {
constructor(
 private actions$: Actions,
 private postService: PostService,
 private authService: MsalService
) { }

loadPosts$ = createEffect(() =>
this.actions$.pipe(      
  ofType(PostAction.loadPost),            
  mergeMap(() => {
    return this.postService.getPosts().pipe(
      map((data) => PostAction.loadPostSuccess({ posts: data })),
      catchError((error: string) => {
        console.log('error', error);
        return of(PostAction.loadPostFailure({ error }))
      }
      )
    );
  })
  )
 );

}

问题原因及修复方案 #

1. 作用域拼写错误 #

你配置的scopes: ['opendid']是拼写错误，Azure B2C标准的OpenID Connect作用域是openid（小写d结尾）。错误的作用域会导致静默获取令牌失败，触发拦截器的交互提示。

2. 守卫与Effect的执行时机冲突 #

虽然路由加了MsalGuard，但如果PostShellComponent初始化时直接触发loadPost action（比如在ngOnInit里），会出现守卫还没完成登录流程，Effect就已经发起API请求的情况。此时拦截器尝试静默拿令牌失败，就会抛出错误。

具体修复步骤： #

• 修正作用域配置：把受保护资源里的scopes改成['openid']，如果你的API有自定义作用域，要替换成Azure B2C应用注册中配置的正确作用域。
• 确保登录完成后再触发API请求：
  方案一：在组件中监听登录状态，确认登录完成后再分发action：

  ngOnInit(): void {
    this.authService.instance.handleRedirectPromise().then(() => {
      const activeAccount = this.authService.instance.getActiveAccount();
      if (activeAccount) {
        this.store.dispatch(PostAction.loadPost());
      }
    });
  }
  

  方案二：在Effect中增加登录状态检查，无活跃账户时直接触发登录重定向：

  loadPosts$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostAction.loadPost),
      switchMap(() => {
        const activeAccount = this.authService.instance.getActiveAccount();
        if (!activeAccount) {
          this.authService.loginRedirect();
          return EMPTY;
        }
        return this.postService.getPosts().pipe(
          map(data => PostAction.loadPostSuccess({ posts: data })),
          catchError(error => of(PostAction.loadPostFailure({ error })))
        );
      })
    )
  );
  

• 检查MSAL基础配置：确认MsalModule的auth参数（clientId、authority、redirectUri等）和Azure B2C应用注册的配置完全匹配，且已为应用授予目标API的权限。

额外说明 #

拦截器的错误提示本身不是致命问题，MSAL会自动触发重定向来获取令牌，但你期望MsalGuard先触发登录，所以必须保证守卫完成认证流程后，再执行组件内的API请求逻辑。

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