Vuejs实战项目三:退出系统功能实现
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;
}
}
}
};
Vuejs实战项目三:退出系统功能实现的更多相关文章
- Vuejs实战项目步骤一
1.使用vue初始化项目 vue create msm-demo #创建项目 npm run serve #部署 2.更改public文件夹下面的index文件,只留下 <div id=&quo ...
- PYTHON 爬虫笔记十:利用selenium+PyQuery实现淘宝美食数据搜集并保存至MongeDB(实战项目三)
利用selenium+PyQuery实现淘宝美食数据搜集并保存至MongeDB 目标站点分析 淘宝页面信息很复杂的,含有各种请求参数和加密参数,如果直接请求或者分析Ajax请求的话会很繁琐.所以我们可 ...
- Vuejs实战项目四:权限校验
路由跳转参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 在/src下创建permission.js进行权限 ...
- Vuejs实战项目五:数据列表
1.在EasyMock 中添加数据列表模拟接口 请求url:/suyuan/list 请求方式:get 描述:数据列表 mock.js配置: 例: { "code": 2000, ...
- Vuejs实战项目:登陆页面
1.在view文件夹下创建login文件夹,创建index.vue:代表登录的组件 配置router.js,导入登录组件 import Vue from "vue"; import ...
- C#网络编程技术FastSocket实战项目演练
一.FastSocket课程介绍 .NET框架虽然微软提供了socket通信的类库,但是还有很多事情要自己处理,比如TCP协议需要处理分包.组包.粘包.维护连接列表等,UDP协议需要处理丢包.乱序,而 ...
- Selenium Web 自动化 - 项目实战(三)
Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解 3.1 解析新增页面目录 3.2 解析新增测试用例目录 3. ...
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...
- C#网络编程技术微软Socket实战项目演练(三)
一.课程介绍 本次分享课程属于<C#高级编程实战技能开发宝典课程系列>中的第三部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集.整理 ...
随机推荐
- 通过JBOSS服务器来实现JMS消息传送
首先必须启动JBOSS服务器,以便于充当JMS传递消息的中间键: JBOSS消息发送端: package test; import java.util.concurrent.CountDownLatc ...
- python编码(31-01)
以什么方式编码,就以什么方式解码! 第一种编码与解码方式: encode()编码 decode()解码 type()查看数据类型 repr()查看数据内容 s = '你好'print(type(s)) ...
- Mysql优化系列之查询性能优化前篇2
接前一篇,这一篇主要总结下几个经常要用的命令 命令一:explain+sql mysql> explain select * from servers; +----+-------------+ ...
- 阻止a标签跳转/刷新
<a href='javascript:;' onClick='functionA()'>点击</a> //注意":"."’":均需为英 ...
- UMP系统架构 RabbitMQ
- 【笔记篇】C#笔记2
返回目录:目录请戳这里~ C#数组 基本概念不提.. int[] a; bool[] b = new bool[10]; float[] c = {0.5, 57.0, 233.3, 12345.67 ...
- 单体内置对象——Global对象
单体内置对象的定义:由ECMAScript实现提供的.不依赖于宿主环境的对象,这些对象在ECMAScript程序执行之前已经存在了.意思就是说:开发人员不必显式地实例化内置对象,因为他们已经实例化了. ...
- LoadRunner内部结构(1)
LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm 翻译: LoadRunner内部结构 1, 被测系统是由驱动 ...
- Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁【转】
Java虚拟机性能管理神器 - VisualVM(9) 排查JAVA应用程序线程死锁[转] 标签: javajvm监控工具性能优化 2015-03-11 19:59 1948人阅读 评论(0) 收藏 ...
- hp笔记本在设置VT-x为启用模式后还是无法在VMware上开启CentOS虚拟机
在h笔记本上,将VT-x设置为Enabled模式后,需要断开电源,拆下电池,然后再按住开机按钮10秒钟左右放开,再重新装上电池,接通电源即可.