如何在 Nuxt.js 中执行 SignOut 操作答案

【问题标题】：How to perform a SignOut action in Nuxt.js如何在 Nuxt.js 中执行 SignOut 操作
【发布时间】：2021-04-22 21:37:50
【问题描述】：

我目前正在努力将以下针对 Vue.js 应用程序的 router.beforeEach 操作移植到 Nuxt.js 中的可用操作。

我已经很好地搜索了中间件文档，但我不太确定应该遵循什么正确的模式。

在我的 Vue.js 应用程序中每次路由更改之前运行的回调如下：

// This callback runs before every route change, including on page load.
router.beforeEach(async (to, from, next) => {
  // Reset All State When A User Logs Out:
  if (to.redirectedFrom === '/sign-out') {
    store.dispatch('auth/resetAuthState')
    Vue.prototype.authAPI.cleanseLocalStorage()
  }

  if (to.meta.authenticationRequired) {
    if (!store.getters['auth/activeUserIsAuthenticated']) {
      next({ name: 'signIn' })
    } else {
      next()
    }
  } else {
    next()
  }
})

我的 Vue 路由器中有以下重定向来执行重定向操作：

  ...
  {
    path: '/sign-out',
    name: 'signOut',
    redirect: {
      name: 'signIn'
    },
    meta: {
      ...{
        authenticationRequired: false,
        sitemap: {
          ignoreRoute: true
        }
      }
    }
  },
  ...

所以在 SignOut 重定向时，我会清理本地存储并在 Vuex 存储中进行一些进一步的状态管理。

但是，我不知道从哪里开始使用 Nuxt.js - 任何想法都将不胜感激。

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

在我从事的 Nuxt.js 项目中，我创建了一个 sign-out.vue 页面并从那里清空本地存储，然后重定向到主页。

【讨论】：

【解决方案2】：

我建议使用“Nuxt/auth”来处理您的身份验证。您可以在此处阅读此文档： https://auth.nuxtjs.org/

【讨论】：