功能"/>
【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,有rthis.$router.push("/login");} else {this.$message({message: resp.$message,type: "warning",duration: 500, //500毫秒后消失});}});break;default:break;}},
三、运行
npm run serve
更多推荐
【vue会员管理系统】篇六之退出系统功能
发布评论