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

Чтобы добиться этого конкретного поведения, есть два варианта:

1. Отложите рендеринг вашего приложения до тех пор, пока пользователь не подтвердит, что вошел в систему (они будут перенаправлены для аутентификации перед рендерингом вашего приложения).
2. Обработайте это на стороне сервера, перенаправив на взаимодействие входа в систему до визуализации приложения (что потребует решения, отличного от msal-react).

Вот некоторая документация по MSAL AuthenticationTemplate, которая может помочь в определении правильного способа использования MSAL React в этом случае.

В заключение, не рекомендуется инициализировать PublicClientApplicationвнутри компонента React. Пожалуйста, ознакомьтесь с документацией по началу работы и образцом response-router-sample для получения дополнительных указаний по инициализации MSAL в вашем приложении.