Vuejs實戰項目三：退出系統功能實現

1、創建Mockjs接口

method：post

url：/user/logout

描述：退出系統

response：

{
  "code": 2000, //狀態碼
  "flag": true,
  "message": '退出成功'
}

---

2、在src/api/login.js中導出獲取返回退出信息的函數：logout

// 獲取返回的退出系統信息
export function logout(token) {
  return request({
    url: `/user/logout`,
    method: "post",
    data: {
      token   //token: token
    }
  });
}

---

3、在src/components/AppNavbar/index.vue中導入logout方法，並傳入token信息進行清除

export default {
  methods: {
    handleDropDownClick(name) {
      switch (name) {
        case 'a':
          // 修改密碼
          this.$message(`點擊修改密碼`);
          break;
        case 'b':
          // 退出系統
          // token為登錄時保存的信息
          // 先獲取保存的用戶信息
          // localStorage.getItem("msm-user");
          // localStorage.getItem("msm-token");
          logout(localStorage.getItem('msm-token')).then(response => {
            // 接收返回的數據
            const resp = response.data;
            if (resp.flag) {
              // 退出成功
              // 清除本地用戶數據
              localStorage.removeItem("msm-user");
              localStorage.removeItem("msm-token");
              // 回到登錄頁面
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.message,
                type: "warning",
                duration: 2000  // 彈出停留時間
              });
            }
          });
          break;

        default:
          break;
      }
    }
  }
};