React MSAL：如何从所有设备注销？答案

【问题标题】：React MSAL: how to logout from all devices?React MSAL：如何从所有设备注销？
【发布时间】：2022-07-20 20:24:18
【问题描述】：

我们有一个应用程序，我们使用msal-react 进行登录/注销。

有没有办法在注销时注销用户登录的所有设备？

很遗憾，在官方documentation 上找不到关于此的任何信息。

我们也有登录问题，因此用户必须在新选项卡中再次登录（当打开不同的微前端时 - 它们都使用相同的登录会话），尽管令牌存储在本地存储中。

希望有人可以在这里提供帮助或提供文档。

【问题讨论】：

嗨@Codehan25，如果提供的答案解决了您的问题，您可以将其标记为答案或点赞，以便遇到类似问题的其他人可能对他们或社区成员有用。跨度>
嗨 :) - 不。您的回答并不能解决从所有已登录设备中注销的问题。只是描述了正常的注销过程，已经实现了。

标签： reactjs azure-active-directory msal msal-angular msal-react

【解决方案1】：

当您必须通过使用 msal-react 的应用程序注销所有设备时，您当然可以配置所需的应用程序以注销所有已登录应用程序的实例，如下所示：

MSAL.js v2 提供了一种“logoutpopup”方法，该方法可以清除浏览器存储中的缓存并打开一个弹出窗口到 Azure Active Directory (Azure AD) 注销页面。注销后，Azure AD 将弹出窗口重定向回您的应用程序，MSAL.js 将关闭弹出窗口。

通过这种方式，您可以确保您的 React 应用程序已注销 Azure Active Directory，并且所有设备都会响应用户已注销的信息。

通过弹出窗口退出：

 import { useMsal, AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

 function signOutClickHandler(instance) {
 const logoutRequest = {
    account: instance.getAccountByHomeId(homeAccountId),
    mainWindowRedirectUri: "your_app_main_window_redirect_uri",
    postLogoutRedirectUri: "your_app_logout_redirect_uri"
  }
  instance.logoutPopup(logoutRequest);
 }

// SignOutButton Component returns a button that invokes a popup logout when clicked
  function SignOutButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();

return <button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
 };

  // Remember that MsalProvider must be rendered somewhere higher up in the component tree
  function App() {
   return (
    <>
        <AuthenticatedTemplate>
            <p>This will only render if a user is signed-in.</p>
            <SignOutButton />
        </AuthenticatedTemplate>
        <UnauthenticatedTemplate>
            <p>This will only render if a user is not signed-in.</p>
        </UnauthenticatedTemplate>
       </>
      )
    }

同样，如果您使用重定向方法引用退出应用程序的方法，则必须通过设置 postLogoutRedirectUri 来配置它应该在退出后重定向到的 URI。此 URI 应在您的应用程序注册中注册为重定向 URI。

有关详细信息，请参阅以下文档链接：

https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-sign-in?tabs=react#sign-out-with-a-pop-up-window

【讨论】：