Vue--ElementUI实现退出功能

前戏

前面我们已经实现了登录功能，并且能成功登录，那退出功能也是必不可少的。

既然要实现退出功能，那肯定要知道在哪个组件里面写，修改密码和退出登录都是在 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>

退出登录的逻辑就完成了