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>
复制代码

退出登录的逻辑就完成了

 

posted @   邹邹很busy。  阅读(3627)  评论(3编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
历史上的今天:
2019-12-21 vue--自定义指令
点击右上角即可分享
微信分享提示

目录导航