Msal-angular编辑用户资料后如何获取最新payload？

问题原因 #

你当前监听的SSO_SILENT_SUCCESS、ACQUIRE_TOKEN_SUCCESS等事件默认返回的是MSAL本地缓存的身份信息，用户在编辑资料后，身份提供商侧的用户属性已经更新，但MSAL本地缓存的令牌和账户信息没有同步刷新，因此即使事件触发，拿到的payload依然是旧数据。

解决方法 #

1. 主动强制刷新令牌（推荐） #

在用户编辑资料提交成功的逻辑中，主动调用acquireTokenSilent方法，携带forceRefresh: true参数强制跳过本地缓存，直接从身份提供商拉取最新的令牌和用户信息：

// 编辑资料提交成功后执行以下代码
this.authService.instance.acquireTokenSilent({
  account: this.authService.instance.getActiveAccount(),
  scopes: ['你的实际权限范围'], // 替换为业务所需的scope列表
  forceRefresh: true // 关键配置，强制刷新获取最新信息
}).then((result: AuthenticationResult) => {
  // 此处直接获取最新payload
  localStorage.setItem('IdToken', result.idToken);
  this.authService.instance.setActiveAccount(result.account);
})

2. 监听账户更新事件 #

添加对EventType.ACCOUNT_UPDATED事件的监听，该事件会在MSAL内部账户信息被更新时触发，可拿到最新的账户数据：

this.msalBroadcastService.msalSubject$
  .pipe(
    filter((msg: EventMessage) => msg.eventType === EventType.ACCOUNT_UPDATED)
  )
  .subscribe((result: EventMessage) => {
    console.warn("账户信息已更新", result.payload);
    const payload = result.payload as AuthenticationResult;
    localStorage.setItem('IdToken', payload.idToken);
    this.authService.instance.setActiveAccount(payload.account);
  });

3. 调试排查补充 #

如果以上方法仍未触发预期逻辑，可以先在无过滤的msalSubject$订阅中打印所有触发的事件类型，确认用户资料更新后是否有未被监听的事件：

this.msalBroadcastService.msalSubject$
  .subscribe((result: EventMessage) => {
    console.log('当前触发事件类型：', result.eventType);
    console.log('事件完整内容：', result);
  });

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