Nuxt Auth loggedIn 状态被缓存答案

【问题标题】：Nuxt Auth loggedIn state getting cachedNuxt Auth loggedIn 状态被缓存
【发布时间】：2023-03-13 12:04:01
【问题描述】：

我遇到了 Nuxt Auth 登录状态的问题。我在通用模式下使用 Nuxt JS，并且正在使用 Nuxt Auth 进行身份验证。

当用户注销时，$auth.loggedIn 状态会在该会话中正确解析。我在 $auth.logout() 期间没有重定向，但有条件语句可以解决所有注销状态的需求。当用户在该会话中注销时，一切都很好。

问题出现在我的 PWA 实例中，起始 URL 位于： http://example.com/pwa 并且，在mounted() 之后，从这里重定向($router.push(redirectPage)) 到适当的位置。旁注，我尝试重定向服务器端，但无法解决补水问题，所以这似乎是一个不错的选择。

在 logout() 之后，当 PWA 打开 start_url 时，$auth.loggedIn 显示为 true，即使用户已注销。这与本地存储和 cookie 冲突，这些 cookie 对 auth 键都显示为 false。

当我在 Chrome 中调试它并进行硬刷新时，它会将 $auth.loggedIn 正确解析为 false。如果没有硬刷新，它将显示为 true。

这似乎是某种缓存问题。此外，我正在使用 Nuxt PWA 模块。我不确定这是否是缓存 vuex 存储的服务工作者问题。

感谢任何想法。

这是授权配置：

auth: {
        redirect: false,
        strategies: {
            local: false,
            password_grant: {
                scheme: 'local',
                token: {
                    property: 'access_token'
                },
                endpoints: {
                    login: {
                        url: '/oauth/token',
                        method: 'post',
                        propertyName: 'access_token'
                    },
                    logout: false,
                    user: {
                        url: 'api/auth/me',
                        method: 'get',
                        propertyName: 'user'
                    },
                }
            },
}

PWA 工作箱配置使用所有默认缓存值。

【问题讨论】：

标签： nuxt.js progressive-web-apps nuxt-auth

【解决方案1】：

我发现了问题所在。 Nuxt PWA 模块将 start_url 添加到预缓存。也许这是允许离线 PWA 的要求。由于 start_url 已被预先缓存，因此在登录/注销后不会更改状态。为了解决这个问题，每当我登录/注销时，我也会像这样刷新 start_url 预缓存条目：

//delete pre-cache start_url, then re-add, to refresh logged state
caches.open('cache-name').then(function(cache) {
  cache.keys().then( (arrayOfRequest) => {
    arrayOfRequest.forEach(function(request) {
      if (request.url.indexOf('start_url') !== -1) {
        cache.delete(request.url)
        cache.add(request.url)
      }
    })
  });
})

【讨论】：