Question

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

我想要两种用于auth的中间件-auth和guest。身份验证用户不应访问登录页面（'/'），而是将重定向到仪表板，但可以访问其他任何地方。来宾用户应该只能访问登录页面之外的任何页面，并且会在尝试任何操作时重定向到登录页面。

当前，关于身份验证和登录，一切正常。但是，当经过身份验证的用户单击“ /”的链接或刷新页面时，他们将发送到登录页面并再次拥有“来宾”特权，即使他们在vuex存储中仍设置为'loggedIn'。看起来，当SSR在身份验证存储区中启动时，在服务器上不可用，因此它将用户重定向到登录页面，然后在一切混乱的情况下将其重定向，但这是一个猜测。

下面是一些代码：

//布局/默认<-用于登录页面

export default {
  middleware: 'guest'
}

//布局/仪表板<-用于所有经过身份验证的仅用户页面

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头中检索JWT。然后，在运行身份验证和来宾中间件之前，我们为用户设置身份验证存储。

我只需要对API进行ping操作以检查JWT是否有效，然后就可以了。

Nuxt身份验证与来宾和身份验证中间件在刷新时将经过身份验证的用户重定向到错误的页面

1 个答案: