退出登录操作

  async logout() {
      try {
        await this.$confirm("确定退出吗？");
      } catch (error) {
        return console.log(error);
      }
      // 要退出
      this.$store.dispatch("user/quitAction");
      // 跳转
      this.$router.push("/login");
    },

1 删除 token 

2. 删除用户的资料

import { getToken, setToken, removeToken } from "@/utils/auth";
import { loginApi, getInfoApi, getUserInfoApi } from "@/api/user";
import { resetRouter } from "@/router";
const state = {
  token: getToken(), // 读取cookie里面作为默认值
  userInfo: {}, //用户资料
};

const mutations = {
  // 设置token
  setToken(state, data) {
    state.token = data; // 存vuex
    setToken(data); // 存本地
  },
  // 移除token
  removeToken(state) {
    state.token = null;
    removeToken();
  },
  // 设置用户资料
  setUserInfo(state, data) {
    state.userInfo = data;
  },
  // 删除用户资料
  removeUserInfo(state) {
    state.userInfo = {};
  },
};

const actions = {
  // 登录操作
  async loginAction(context, data) {
    // 接收表单数据 data
    // 发生请求 loginApi，得到token
    let token = await loginApi(data);
    // 触发mutation，存储token
    context.commit("setToken", token);
  },
  // 获取用户资料的action
  async getUserProfileAction(context) {
    let res = await getInfoApi();
    let res2 = await getUserInfoApi(res.userId);
    context.commit("setUserInfo", { ...res, ...res2 });
    return res; // 返回结果
  },
  // 退出操作
  quitAction(context) {
    context.commit("removeToken");
    context.commit("removeUserInfo");
    // 1. 清除 vuex中 permission模块里面的routes为静态路由
    // A模块的action如何触发B模块的muations里面的方法呢？
    // context.commit(方法名，实参，{配置对象})
    context.commit("permission/setRoutes", [], { root: true });
    // 2. 重置路由实例对象
    resetRouter();
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};