具有oidc-client.js的Angular应用程序需要在第二个选项卡中登录

Question

我在（oidc-client.js）+ .Net Core IdentityServer4处理的Angular 8中获得了授权。

一切似乎都正常，但是当我在第二个选项卡中打开相同的应用程序时，则需要我再次登录。IdentityServer4具有cookie，因此单击“ 登录”按钮就足够了，并且无需再次提供登录名/密码即可接收新令牌。无论如何，它仍然很烦人。

有什么办法解决吗？我在githubg上发现了一个可能会有所帮助的问题。

有人建议需要将令牌本地化从LocalStorage更改为SessionStorage。但是从个人角度而言，SessionStorage更好，我会保留在那个位置。

Answer 1

如果您想在多个选项卡中使用 SessionStorage （这似乎是正确的），您可以在选项卡之间复制其数据，例如使用LocalStorage事件（请参阅下面的代码示例）或BroadcastChannel，如本问答中所述，或者实现自动登录，就像替代解决方案一样。

(function(){

    if (!sessionStorage.length) {
        // trigger the event to get anything from other tabs
        localStorage.setItem('getSessionStorage', Date.now());
    };

    window.addEventListener('storage', function(event) {

    if (event.key == 'getSessionStorage') {

        //set and remove, so do not really keep the data in LS, but push it into event 
        localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
        localStorage.removeItem('sessionStorage');

    } else if (event.key == 'sessionStorage' && !sessionStorage.length) {

        var data = JSON.parse(event.newValue);

        for (key in data) {
            sessionStorage.setItem(key, data[key]);
        }
    }
});