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

Question

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

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

目前，关于身份验证和登录的一切工作正常。但是，当经过身份验证的用户单击 link 以“/”或刷新页面时，他们将被发送到登录页面并具有 'guest' 特权，即使它们在 vuex 商店中仍然设置为 'loggedIn'。看起来当服务器上的授权存储中的 SSR 启动不可用时，它会将用户重定向到登录页面，然后一切都搞砸了，但这只是猜测。

下面是一些代码：

// 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')
  }
}

其他身份验证中间件是使用 '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 header 中检索 JWT。然后我们在 auth 和 guest 中间件被运行.

之前用用户设置 auth store

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

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

Nuxt auth with a guest and auth middleware redirects an authenticated user on refresh to the wrong page

authentication

middleware

vue.js

nuxt.js