带有guest虚拟机和auth中间件的Nuxt auth会将刷新后的经过身份验证的用户重定向到错误的页面

Question

我正在使用nuxt和nuxt-auth创建一个使用Nuxt的应用程序来处理身份验证。

我想要为auth-auth和guest提供两个中间件。身份验证用户不应该能够访问登录页面（'/'）并将被重定向到仪表板，但可以访问其他任何地方。访客用户不应该访问除登录页面之外的任何页面，并且会在任何尝试时重定向到登录页面。

目前在身份验证和登录方面一切正常。但是，当经过身份验证的用户单击“/”链接或刷新页面时，他们会被发送到登录页面，并且即使它们仍然设置，也会再次拥有“访客”权限在vuex商店中'loggedIn'。看起来当服务器上没有SSR在auth存储中启动时，它会将用户重定向到登录页面，然后当所有内容搞砸时，这就是猜测。

下面是一些代码：

// layout / default < - 用于登录页面

export default {
  middleware: 'guest'
}

// layout / dashboard < - 用于所有经过身份验证的用户页面

export default {
  middleware: 'auth'
}

// middleware / guest.js

export default function (ctx) {
  if (ctx.app.$auth.$state.loggedIn) {
    return ctx.app.$auth.redirect('home')
  }
}

另一个auth中间件是使用'nuxt-auth'创建的，nuxt.config.js文件具有以下设置：

  auth: {
    localStorage: false,
    cookie: {
      options: {
        secure: true
      }
    },
    redirect: {
      login: '/',
      logout: '/',
      callback: '/api/auth/callback',
      home: '/dashboard'
    }
  },

Answer 1

我想我已经解决了。问题似乎与服务器端呈现页面一样，因为它无法访问auth cookie，所以我已经制作了另一个中间件，它应用于整个站点以检查auth，它执行以下操作：

//检查身份验证

export default function (context) {
  context.store.dispatch('auth/initAuth', context.req)
}

然后在Vuex商店中检查我们是否是process.server并从cookie头中检索JWT。然后我们在auth和guest中间件运行之前为用户设置auth存储。

我只需要ping API以检查JWT是否有效，然后应该是它。