调用 HandleRedirectPromise 后，MSAL Authenticated/Unauthenticated 模板组件不工作

Question

我有一个 React 应用程序，我在其中使用 msal 库通过 Azure B2C 进行身份验证，并且我正在使用登录重定向流程。直到最近，我才知道token是登录后存到session中的，我是根据默认的复杂key拉出来的。我最近了解到，您可以调用 msalInstance.HandleRedirectPromise().then(...) 在重定向后实际取回令牌并自己存储。但是，在添加调用后，经过身份验证和未经身份验证的模板组件都停止工作 - 任何一个都没有渲染。

我知道是这样，因为我简化了一个简单的案例：

<AuthenticatedTemplate>AA</AuthenticatedTemplate>
<UnauthenticatedTemplate>BB</UnauthenticatedTemplate>

我在每个渲染的 App.tsx 文件中调用 HandleRedirectPromise：

this.props.instance
  .handleRedirectPromise()
  .then((tokenResponse) => {
    if (tokenResponse !== null) {
      const idToken = tokenResponse.idToken;
      sessionStorage.setItem("idToken", idToken);
    }
  })
  .catch((error) => {
    console.error(error);
  });

当我删除 handleRedirectPromise 调用时，会呈现正确的模板。我是否需要手动设置 ActiveAccount 才能使模板再次工作？

Answer 1

没有返回任何内容，因为 handleRedirection 正在返回空令牌响应。

这是 microsoft-authentication-library-for-js 中的一个已知错误。您需要将 /home 路由添加到您的 AAD 应用程序注册中。在 b2c 配置中注释您的 redirectUri 并将 navigationToLoginRequestUrl 设置为 true。

调用 HandleRedirectPromise 后，MSAL Authenticated/Unauthenticated 模板组件不工作

MSAL Authenticated/Unauthenticated Template Components not working after calling HandleRedirectPromise

reactjs

msal