带有访客和身份验证中间件的 Nuxt 身份验证将经过身份验证的用户在刷新时重定向到错误的页面

Posted 2023-03-07

【中文标题】带有访客和身份验证中间件的 Nuxt 身份验证将经过身份验证的用户在刷新时重定向到错误的页面

【英文标题】：Nuxt auth with a guest and auth middleware redirects an authenticated user on refresh to the wrong page

【发布时间】：2019-07-30 15:45:59

【问题描述】：

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

我想要两个用于身份验证的中间件 - 身份验证和访客。 auth 用户应该无法访问登录页面 ('/') 并将被重定向到仪表板，但可以访问其他任何地方。来宾用户应该无法访问除登录页面之外的任何页面，并且在任何尝试时都会重定向到登录页面。

目前在身份验证和登录方面一切正常。但是，当经过身份验证的用户单击指向“/”的链接或刷新页面时，他们将被发送到登录页面并再次拥有“访客”特权，即使他们在 vuex 商店中仍然设置为“loggedIn”。看起来当 s-s-r 启动时，auth 存储在服务器上不可用，因此它将用户重定向到登录页面，然后一切都搞砸了，但这只是猜测。

下面是一些代码：

//布局/默认

export default 
  middleware: 'guest'

// 布局/仪表板

export default 
  middleware: 'auth'

// 中间件/guest.js

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

另一个身份验证中间件是使用“nuxt-auth”创建的，nuxt.config.js 文件具有以下设置：

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

【参考方案1】：

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

//检查授权

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

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

我只需要 ping API 来检查 JWT 是否有效，然后就可以了。