Vuejs实战项目三:退出系统功能实现
2024-08-29 23:12:37
1、创建Mockjs接口
method:post
url:/user/logout
描述:退出系统
response:
{
"code": 2000, //状态码
"flag": true,
"message": '退出成功'
}
2、在src/api/login.js中导出获取返回退出信息的函数:logout
// 获取返回的退出系统信息
export function logout(token) {
return request({
url: `/user/logout`,
method: "post",
data: {
token //token: token
}
});
}
3、在src/components/AppNavbar/index.vue中导入logout方法,并传入token信息进行清除
export default {
methods: {
handleDropDownClick(name) {
switch (name) {
case 'a':
// 修改密码
this.$message(`点击修改密码`);
break;
case 'b':
// 退出系统
// token为登录时保存的信息
// 先获取保存的用户信息
// localStorage.getItem("msm-user");
// localStorage.getItem("msm-token");
logout(localStorage.getItem('msm-token')).then(response => {
// 接收返回的数据
const resp = response.data;
if (resp.flag) {
// 退出成功
// 清除本地用户数据
localStorage.removeItem("msm-user");
localStorage.removeItem("msm-token");
// 回到登录页面
this.$router.push("/login");
} else {
this.$message({
message: resp.message,
type: "warning",
duration: 2000 // 弹出停留时间
});
}
});
break; default:
break;
}
}
}
};
最新文章
- 二维码生成Zxing.net DEMO
- [翻译]opengl扩展教程1
- JavaScript入门篇 编程练习
- ORACLE8.07客户端配置指南
- MongoDB 的 GridFS 详细分析
- wireshark怎么抓包、wireshark抓包详细图文教程
- oracle默认管理员的帐号和密码以及密码修改和解除锁定
- CentOS6.5安装tomcat7
- 使用assets目录来实现插件机制
- jmeter 环境部署、数据库设置、分布式设置、多网卡配置等随笔
- 为什么不需要为Python对象添加 getter 和 setter
- ASP.NET Core的身份认证框架IdentityServer4--(2)API跟WEB端配置
- 【DirectX12】第六章-练习
- docker项目ssl 安全证书的种种
- centos7 安装部署zabbix
- python笔记(一)获取当前目录路径和文件
- python rtree包查找三维空间下的最近设备
- 安装jdk1.8
- LeetCode 977 Squares of a Sorted Array 解题报告
- python中处理.db文件借助navicat
热门文章
- 本地项目通过 git 同步到 github
- vue qs插件的使用
- Spring MVC上传、下载 文件
- 2019-8-31-dotnet-core-发布只带必要的依赖文件
- Halt- Linux必学的60个命令
- [JZOJ4649] 【NOIP2016提高A组模拟7.17】项链
- Java参数校验工具validation实践
- 8年前诞生于淘宝,细数阿里云RPA 的前世今生!
- 箭头函数报错:Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
- php中$_REQUEST、 $_GET、 $_POST、 $_COOKIE 的关系和区别