我正在使用 Vue + VuexlocalStorage 删除用户令牌以使用户注销并将其重定向到登录页面 .

组件注销方法代码:

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方法然后返回组件注销方法,然后提交变异 .