MSAL 2.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

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

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

这里有一些关于 MSAL AuthenticationTemplate 的文档，可能有助于确定在这种情况下使用 MSAL React 的正确方法。

最后一点，不建议您在 React 组件中初始化 PublicClientApplication。请查看 Getting Started documentation and the react-router-sample 以获取有关如何在您的应用程序中初始化 MSAL 的更多指导。

MSAL 2.0 将用户快速重定向到登录屏幕

MSAL 2.0 Redirect User to Login Screen Fast

azure-ad-b2c

msal

msal.js

msal-react