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

Question

我在由 (oidc-client.js) + .Net Core IdentityServer4 处理的 Angular 8 中获得授权。

似乎一切正常，但当我在第二个选项卡中打开同一个应用程序时，它需要我再次登录。 IdentityServer4 有 cookie，因此只需单击 登录按钮 即可收到新 token ，而无需再次提供登录名/密码。无论如何，它仍然很烦人。

有什么办法可以解决吗？我找到了 question on githubg这可能会有所帮助。

有些人建议需要将 token 本地化从 LocalStorage 更改为 SessionStorage。但就我个人而言，SessionStorage 更好，我会把它放在那个地方。

Answer 1

如果您想在多个选项卡中使用 SessionStorage(这似乎是正确的)，您可以在选项卡之间复制其数据，例如使用 LocalStorage 事件(参见下面的代码示例)或 BroadcastChannel ，如本 Q&A 中所述，或实现自动登录，如替代解决方案 does .

(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]);
        }
    }
});