打开多个浏览器选项卡时应如何处理用户注销用例

Question

我在Identity Server 4 中使用angular-oauth2-oidc。

用户需要通过 OpenId Connect 隐式流登录。我的 ID 和访问令牌存储在 Web 浏览器 localStorage 中。

当用户打开多个浏览器选项卡，然后用户从其中一个选项卡注销时，我应该如何处理其余的选项卡？

我试图捕捉 session_terminate 事件，他们试图将用户注销。但是，它不会将用户重定向回登录页面。

this.oauthService.events.filter(e => e.type ==='session_terminated')
                  .subscribe(e => {this.oauthService.logout();})

有什么建议？谢谢

Answer 1

有趣的。无论如何，看看它如何与图书馆一起工作已经在我的待办事项清单上了。

我已经创建了一个专用的 Playground 示例存储库，非常适合测试它。我发现有两种不同的情况：

1. 用户自行前往IdentityServer，然后单击“注销”
2. 用户通过我们自己的应用程序进行单点注销

仅在第一种情况下您才会收到session_terminated事件。在第二种情况（您似乎有）中，您会session_error在第二个选项卡中收到一个事件，因为第一个选项卡：

1. 清除您存储的令牌
2. 将您重定向到注销页面（您仍然需要单击“注销”）

您可以在这些屏幕截图中看到很多内容：

场景 1：在第三个选项卡中显式注销

场景2：退出应用程序

所以我认为你的解决方案是也挂钩session_error或类似的东西。

脚注：更多地考虑上述内容，我认为通过监听事件也可能有其他解决方法localStorage，并注意何时access_token被另一个选项卡清除。