使用 localStorage 时使用 msal-react 注销所有选项卡

我有一个 React 18.x 和 NextJS 12.x 应用程序，它使用msal-react1.4.4（依赖 msal-browser 2.28.0）和 Azure B2C 进行身份验证。我的配置是这样的：

export const msalConfig: Configuration = {
  auth: {
    clientId: clientId as string,
    authority: `https://${tenant}.b2clogin.com/${tenant}.onmicrosoft.com/${b2cPolicy}`,
    knownAuthorities: [`${tenant}.b2clogin.com`],
    redirectUri: '/openid-redirect',
    postLogoutRedirectUri: '/',
  },
  cache: {
    cacheLocation: 'localStorage',
  },
};

页面受保护<MsalAuthenticationTemplate interactionType={InteractionType.Redirect} ...>通过重定向流强制登录的组件。这一切都很好。

在我的导航栏中有一个注销按钮：

const handleLogout = () => {
  msalInstance.logoutRedirect({
    account: msalInstance.getActiveAccount(),
  });
};

<button onClick={() => handleLogout()}>
  Logout
</button>

并且选项卡本身也可以正常注销。

所有其他选项卡loose访问access_token和其他信息，以便他们有效地“注销”并且无法调用 APIbearer认证不再。但是，该应用程序的 UI 不会将用户显示为已注销。

我原以为所有其他选项卡都会注意到注销并相应更新，可能会将用户重定向到另一个页面。或者至少我会期望loggerCallback我已配置为显示某个其他选项卡已将我们注销的事件或通知。

如果我手动做window.addEventListener('storage', evt => console.log(evt));我确实看到其他选项卡通知存储正在被清除。

I found 另一个相关问题这是关于交叉device注销，我希望依赖 OpenID 会话管理规范。我想这个解决方案可能对我有用，但另一个问题或答案也包含一个可行的解决方案。

相关MSDN文档没有提到任何有关“多个选项卡”或类似内容的内容。

如何配置我的应用程序和 msal-react 以通知其他选项卡的注销？

解决方法

目前我们使用了以下解决方法：

export function useLogoutInOtherTabsListener() {
  const router = useRouter();

  useEffect(() => {
    const handler = (evt: StorageEvent) => {
      if (evt.key === 'logout-event' && evt.newValue === 'started') {
        msalInstance.logoutRedirect({
          onRedirectNavigate: () => false, // No need to do redirects via msal, we'll just route the user to '/' ourselves
        });
        router.push('/');
      }
    };

    window.addEventListener('storage', handler);
    return () => {
      window.removeEventListener('storage', handler);
    };
  }, [router]);
}

export function logoutAllTabs(): void {
  // We'd prefer to use an msal-mechanism, but so far couldn't find any.
  // See also: https://stackoverflow.com/q/73051848/419956
  window.localStorage.setItem('logout-event', 'started');
  window.localStorage.removeItem('logout-event');
  msalInstance.logoutRedirect();
}

并打电话useLogoutInOtherTabsListener() in _app.tsx.

• 清除会话 ID 应该能够注销所有页面。为此，我们可以使用以下概念：front channel logout .

• In front channel logout我们基本上加载一个不同的页面，该页面将完成所有注销过程并清除缓存并停止对站点的本地访问。这里页面将被加载到隐藏的 iframe 中并仅执行注销操作。

• 但为了让它发挥作用，我们必须设置system.allowRedirectInIframe为真。此外，我们还必须在门户中注册注销 URL。

const msal = new PublicClientApplication({
    auth: {
        clientId: "my-client-id"
    },
    system: {
        allowRedirectInIframe: true
    }
})

// Automatically on page load
msal.logoutRedirect({
    onRedirectNavigate: () => {
        // Return false to stop navigation after local logout
        return false;
    }
});

参考下面这个文档上面的代码来自那里。