Vue |
您所在的位置：网站首页 › element下拉菜单样式 › Vue |
|
前戏
前面我们已经实现了登录功能，并且能成功登录，那退出功能也是必不可少的。 既然要实现退出功能，那肯定要知道在哪个组件里面写，修改密码和退出登录都是在 components/AppHeader/index.vue 里面 您好 >修改密码 >退出登录当我们点击退出登录的时候，会调用 handleCommand 方法，因为修改密码和退出登录都调用了 handleCommand 方法，我们可以做个判断，根据传的参数不同进行不同的处理。 首先来进行我们的接口配置 在 src/api/login.js 下面添加退出登录的接口，新增下面的代码 // 退出登录 export function logout(token){ return request({ url: BASE_URL + '/api/user/logout', method: 'post', headers:{ "Authorization":"JWT "+token // 请求头 } }) }然后再 components/AppHeader/index.vue 里面写退出登录的逻辑，代码如下 邹邹管理系统 您好 >修改密码 >退出登录 import {logout} from '@/api/login' // 导入退出系统接口 export default { methods: { handleCommand(command){ switch (command) { case 'edit': console.log('修改密码') break; case 'quit': console.log('退出登录') // 获取token const token = localStorage.getItem('zz-token') // 调用退出登录接口 logout(token).then(response =>{ const res = response.data if (res.success){ // 退出成功，清除本地数据 localStorage.removeItem('zz-token') // 回到登录页面，重新登录 this.$router.push('/login') }else{ // 退出失败 this.$message({ showClose: true, // 可以关闭 message: res.message, type: 'warning' }); } }) break; default: break; } } }, } /* logo */ .logo { vertical-align: middle; /* 居中 */ padding: 0px 10px 0px 40px; /* 上右下左 */ } /* 文字 */ .company { position: absolute; color: white; } /* 下拉菜单 */ .el-dropdown{ float: right; /* 浮动在右边 */ margin-right: 40px; } /* 系统管理 */ .el-dropdown-link{ color: white; cursor: pointer; /* 鼠标放上去是手的形状 */ }退出登录的逻辑就完成了
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |