从弹出设置 localStorage window

Question

我有一个处理用户身份验证的弹出窗口 window。我想在 localStorage 中设置用户的 organization_id 以便我可以访问它。以下是我对失败结果采取的以下步骤。

点击登录。这会触发弹出窗口
输入电子邮件和密码。身份验证成功后弹出窗口关闭。
检查本地存储。 organization_id

为了取得成功，我采取了以下步骤。

临时修改代码，防止弹窗关闭window。
点击登录。这会触发弹出窗口。
输入电子邮件和密码。弹出窗口保持不变。
查看localStorage，发现确实有正确设置的organization_id。
还原代码以便弹出窗口再次关闭。
点击登录。触发弹出窗口。
输入电子邮件和密码。弹出窗口关闭。
检查本地存储。现在有一个 organization_id.

我正在执行硬重置并在所有更改后清空缓存。

如何解释这种奇怪的行为？为什么在弹出窗口中选中它会导致它起作用？

handleAuthentication () {
this.auth0.parseHash({hash: window.location.hash}, (err, authResult) => {
  if (authResult && authResult.accessToken && authResult.idToken) {
    this.setSession(authResult);
    window.opener.location.reload(true);
    window.close();
    e.preventDefault();
  } else if (err) {
    router.replace('home')
    console.log(err)
    alert(`Error: ${err.error}. Check the console for further details.`)
  }
})
}

setSession (authResult) {
this.auth0.client.userInfo(authResult.accessToken, function(err, user) {
  localStorage.setItem('organization_id', user.organization_id);
});
// Set the time that the access token will expire at
let expiresAt = JSON.stringify(
  authResult.expiresIn * 1000 + new Date().getTime()
)
localStorage.setItem('access_token', authResult.accessToken)
localStorage.setItem('id_token', authResult.idToken)
localStorage.setItem('expires_at', expiresAt)
this.authNotifier.emit('authChange', { authenticated: true })
}

Answer 1

问题是 window 在函数完成之前关闭。解决方案是在弹出窗口关闭时设置超时 window，如下所示：

// Do some function call

setTimeout(()=>{
   window.close()
}, 1500);

从弹出设置 localStorage window

Setting localStorage from popup window

javascript

authorization

popup

local-storage