vue.js - 如何在Nuxt.js中实现注销？

Question

我想在我的应用程序中实现注销，因此我在documentation中看到了logout()函数Nuxt 的，我不知道它到底是如何工作的，因为它在文档中没有解释，但我尝试使用它，但它对我不起作用，当我单击 logout 链接时，用户保持身份验证，但是刚刚重定向到主页。在我的服务器中，我没有 logout 功能，我使用 laravel/passport，登录请求的响应是 token 和用户数据，然后我将它们保存在 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 保持 true

localstorege

Answer 1

你试过这个吗？

await this.$auth.logout()

此外，尝试将其绑定(bind)到按钮而不是链接。
我不确定当您有 nuxt-link 时 @click 事件是否正确发生。