MSAL2.0快速将用户重定向到登录屏幕

Question

我使用以下库："@azure/msal-browser"："^2.16.0"，"@azure/msal-react"："^1.0.1"，

我需要重定向用户登录屏幕，而用户不能看到任何内容。我怎么能做到呢？

目前，我有以下几点：

export default function Main() {
  const msalInstance = new PublicClientApplication(msalConfig);
  useEffect(() => {
    msalInstance
      .handleRedirectPromise()
      .then((s) => {
        if (s === null) msalInstance.loginRedirect(loginRequest); // not logged in
        else console.log(s); // logged in
      })
      .catch((a: any) => {
        console.log("err");
        console.log(a);
      });
  }, []);
  return <App instance={msalInstance} />;
}

But, it loads the app for a second then does the redirection.

Answer 1

为了实现这一特定行为，有两种选择：

1. 延迟呈现您的应用程序，直到用户确认已登录(在您呈现应用程序之前，它们将被重定向为身份验证)。
2. 在服务器端通过重定向到应用程序呈现之前的登录交互(这将涉及msal-react以外的解决方案)来处理这个问题。

下面是一些关于MSAL AuthenticationTemplate的文档，这些文档可能有助于确定在本例中使用MSAL反应的正确方式。

最后，不建议您在React组件中初始化PublicClientApplication。请查看快速入门文档和反应-路由器-样本，以获得有关如何在应用程序中初始化MSAL的更多指导。