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

一、建立Mockjs接口

method：post

url：/user/logout

描述：退出系統

response：

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

---

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

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

---

三、在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; } } } };