【从0到1打造vue element-ui管理后台 】 第十三课 完善后台管理退出功能

258 阅读1分钟

完善后台管理退出功能

一、打开AppHeader/index.vue

1.1 修改文档

 <i class="el-icon-user-solid"></i> {{userData[0].name}} 
 
  data(){
    return{
      userData:[]
    }
  },
 created(){
      this.userData = JSON.parse(localStorage.getItem('manager-user'))
  },

image.png

1.2 加入退出接口 server-api/mocks/新建一个logOut.js

/**
 * 退出登录接口
 *
 * @url logOut
 *
 */
 
 module.exports = function (req) {
    return {
      code: 200,
      flag:true,
      message:"退出成功"
    }
  };

1.3 打开src/api/login.js

export function logout(token){
    return myaxios({
        url:`logOut`,
        method: "post",
        data:{
            token
        }
    })
}

1.4 前后台接口联调

handleCommand(command) {
      switch (command) {
        case "EditPassword":
          this.$message("修改密码");
          break;
        case "exit":
          const token = localStorage.getItem("manager-token");
          logout().then((response) => {
            const resp = response.data;
            if (resp) {
              localStorage.removeItem("manager-user");
              localStorage.removeItem("manager-token");
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
                duration: 1000,
              });
            }
          });
          this.$message("退出登录");
          break;
        default:
          break;
      }
    }