Nuxt Auth 登录状态被缓存

问题描述

我遇到了 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 冲突，所有的 auth 密钥都显示为 false。

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

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

感谢任何想法。

这是认证配置：

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