前戲

前面我們已經實現了登入功能，並且能成功登入，那退出功能也是必不可少的。

既然要實現退出功能，那肯定要知道在哪個元件裡面寫，修改密碼和退出登入都是在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>

退出登入的邏輯就完成了