调用HandleRedirectPromise后MSAL身份验证模板组件失效问题

问题原因 #

AuthenticatedTemplate和UnauthenticatedTemplate的渲染逻辑完全依赖MSAL上下文内的登录状态和activeAccount（激活账户）标识，你遇到的双向不渲染问题是两个错误用法共同导致的：

1. 你在App每次渲染时都调用handleRedirectPromise，这个方法的作用是处理重定向回调的身份响应，重复调用会打乱MSAL的内部状态同步逻辑，导致组件无法读取到正确的登录状态。
2. 你拿到tokenResponse后没有设置激活账户，MSAL React组件无法自动识别当前登录的账户身份，自然无法判断该渲染哪个模板。

解决方案 #

1. 调整handleRedirectPromise的调用时机 #

把这部分逻辑移到类组件的componentDidMount生命周期钩子中（如果是函数组件则放在空依赖的useEffect里），保证整个应用生命周期内只执行一次：

componentDidMount() {
  this.props.instance
    .handleRedirectPromise()
    .then((tokenResponse) => {
      if (tokenResponse !== null) {
        const idToken = tokenResponse.idToken;
        sessionStorage.setItem("idToken", idToken);
        // 新增此行设置当前激活账户
        this.props.instance.setActiveAccount(tokenResponse.account);
      }
    })
    .catch((error) => {
      console.error(error);
    });
}

2. 额外验证点 #

确认你的应用外层已经正确用MsalProvider包裹，且传入的MSAL实例配置和初始化时的缓存配置一致，不要手动修改MSAL默认存储在会话存储中的缓存条目，避免内部状态冲突。

修改后两个模板就可以正常根据登录状态渲染对应内容了。

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