【vue会员管理系统】篇六之退出系统功能

一、效果图

点击之后跳转到登陆界面

二、实现步骤

2.1Easy Mock新增接口

打开Easy Mock新建接口

方法:post

URL:user/logout

描述：退出系统

2.2新增api

在api/login.js下添加以下代码

export function logout(token) {
  return request({
    url: `/user/logout`,
    method: "post",
    data: {
      token,
    },
  });
}

2.3调用接口

在AppHeader/index.vue下新增代码，实现该功能

将handleCommand里原先的代码改成switchd的代码

import { logout } from "@/api/login";//引入

handleCommand(command) {
      switch (command) {
        case "edit":
          //修改密码
          this.$message("修改了密码");
          break;
        case "exit":
          //退出系统
          logout(localStorage.getItem("mms-token")).then((response) => {
            const resp = response.data;
            if (resp.flag) {
              //退出成功
              //清除本地数据
              localStorage.removeItem("mms-token");
              localStorage.removeItem("mms-user");
              //回到登录页
              //注意！！！是router，有r
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.$message,
                type: "warning",
                duration: 500, //500毫秒后消失
              });
            }
          });
          break;
        default:
          break;
      }
    },

三、运行

npm run serve