Question

我正在使用 Vue + Vuex 从 localStorage 中删除用户令牌，以使用户注销并重定向到登录页面。

组件注销方法代码：

methods: {
      logout () {
        this.$store.dispatch('logout')
          .then(response => {
            this.$router.push({ name: 'login'});
          }).catch((e) => {
            console.log(e);
          });
      }
    }

存储操作代码：

logout({commit}) {
    return new Promise((resolve, reject) => {
      try {
        commit('logout');
        resolve("done");
      } catch (e) {
        reject(e);
      }
    });
  }

商店突变功能：

logout (state) {
    localStorage.removeItem('user');
    state.is_logged_in = false;
    state.user = null;
  }

问题是：

会发生什么：

用户重定向到登录页面。
用户重定向回仪表板。
用户访问令牌已删除。

因此用户停留在同一页面上。

这意味着：

分派action方法，然后返回到组件注销方法，然后提交突变。

Answer 1

我将仅向您展示我的注销功能，它将帮助您：

  logout() {
      this.$store.dispatch("setToken", null);
      this.$store.dispatch("setAdmin", null);
      this.$router.push({
        name: "root"
      });
    }

并在商店中：

mutations: {
    setToken (state, token) {
      state.token = token
      if (token) {
        state.isAdminLoggedIn = true
      } else {
        state.isAdminLoggedIn = false
      }
    },
    setAdmin (state, admin) {
      state.admin = admin
    }
  },
  actions: {
    setToken ({ commit }, token) {
      commit('setToken', token)
    },
    setAdmin ({ commit }, admin) {
      commit('setAdmin', admin)
    }

Vuex函数在另一个之前执行

1 个答案: