前戏
前面我们已经实现了登录功能，并且能成功登录，那退出功能也是必不可少的。
既然要实现退出功能，那肯定要知道在哪个组件里面写，修改密码和退出登录都是在 components/AppHeader/index.vue 里面
<!-- 下拉菜单--> <el-dropdown @command="handleCommand"><!-- 绑定指令,在methods里定义--> <span class="el-dropdown-link"> 您好 <i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <!-- icon是修改图标 ，command是点击后传给方法的值--> <el-dropdown-item icon="el-icon-edit" command="edit">>修改密码</el-dropdown-item> <el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 下拉菜单结束-->
当我们点击退出登录的时候，会调用 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 里面写退出登录的逻辑，代码如下
<template> <!-- logo和文字 --> <div class="header"> <a href="#/"> <!-- 点击进入首页 --> <img class="logo" src="@/assets/Logo1.png" width="25px" /> <span class="company">邹邹管理系统</span> </a> <!-- logo和文字结束 --> <!-- 下拉菜单--> <el-dropdown @command="handleCommand"><!-- 绑定指令,在methods里定义--> <span class="el-dropdown-link"> 您好 <i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <!-- icon是修改图标 ，command是点击后传给方法的值--> <el-dropdown-item icon="el-icon-edit" command="edit">>修改密码</el-dropdown-item> <el-dropdown-item icon="el-icon-s-operation" command="quit">>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <!-- 下拉菜单结束--> </div> </template> <script> 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; } } }, } </script> <style scoped> /* 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; /* 鼠标放上去是手的形状 */ } </style>
