一、效果图

点击之后跳转到登陆界面

二、实现步骤

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，有rthis.$router.push("/login");} else {this.$message({message: resp.$message,type: "warning",duration: 500, //500毫秒后消失});}});break;default:break;}},

三、运行

npm run serve