Nuxt.js如何实现注销？

Question

我想在我的应用程序中实现注销，所以我在 Nuxt 的 documentation 中看到了 logout() 函数，我不知道它到底是如何工作的，因为它没有在文档中解释，但我尝试使用它，但它对我不起作用，当我单击 logout link 时，用户保持身份验证但只是重定向到主页。在我的服务器中，我没有 logout 函数，我使用的是 laravel/passport，登录请求的响应是令牌和用户数据，然后我将它们保存在 vuex 中，并使用 persistedstate 来避免手动刷新页面清空状态

Navbar.vue 其中我使用注销

<template>
  <li v-if="$auth.loggedIn" class="nav-item">
    <nuxt-link class="nav-link" to="/" @click="logout">logout</nuxt-link>
  </li>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['isAuthenticated', 'loggedInUser']),
  },
  methods: {
    async logout() {
      await this.$auth.logout()
    },
  },
}
</script>

store/index.js

<script>
export const state = () => ({
  user: {},
  token: '',
  id: '',
})

export const mutations = {
  saveUser(state, payload) {
    state.user = payload
  },
  saveId(state, id) {
    localStorage.setItem('id', id)
    state.id = id
  },

  saveToken(state, token) {
    localStorage.setItem('authToken', token)
    localStorage.getItem('authToken')
    state.token = token
  },
}
export const actions = {
  saveUserAction({ commit }, UserObject) {
    commit('saveUser')
  },
  logoutUser({ commit }) {
    commit('logout_user')
  },
}
export const getters = {
  getUser: (state) => {
    return state.user
  },
  isAuthenticated(state) {
    return state.auth.loggedIn
  },

  loggedInUser(state) {
    return state.user.user
  },
}
</script>

login.vue

<script>
export default {
  methods: {
    async login() {
      const succesfulLogin = await this.$auth.loginWith('local', {
        data: {
          email: this.email,
          password: this.password,
        },
      })
      this.$store.commit('saveUser', succesfulLogin.data.user)
      this.$store.commit('saveToken', succesfulLogin.data.token)
      this.$store.commit('saveId', succesfulLogin.data.user.id)

      if (succesfulLogin) {
        await this.$auth.setUser({
          email: this.email,
          password: this.password,
        })
        this.$router.push('/profile')
      }
    },
  },
}
</script>

这就是我按下 logout 后商店的样子，loggedIn 保持正确

localstorege

Answer 1

你试过吗？

await this.$auth.logout()

此外，尝试将其绑定到按钮而不是 link。
当您有 nuxt-link.

时，我不确定 @click 事件是否正确发生

Answer 2

此外，在 GraphQl 中可以使用：

await this.$apolloHelpers.onLogout()

Nuxt.js如何实现注销？

How to implement logout in Nuxt.js?

nuxt.js

nuxt-auth