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>

退出登錄的邏輯就完成了