今天要來做頭像菜單的最後一個功能 - 登出

內容包含登出時要呼叫的API及處理!!

#登出API

登出API相對前面做過的API來說算最簡單的，因為不需要連資料庫，只要把Token處理後簽回cookie就結束了!!
打開後端(b2e)專案開始吧~
做API的步驟應該見怪不怪了

#Step 1

開啟 /routes/users/index.js 新增路由:
路徑 signout 對應controller: userCtrlSignout

router.post('/signout', userCtrl.userCtrlSignout);

#Step 2

開啟 /controllers/users.controller.js 加上 controller: userCtrlSignout
傳入Token給module處理，將處理完的結果簽回cookie

const userCtrlSignout = (req, res) => {
    userModule.userModuleSignout(req.signedCookies.SigninTokens).then((moduleResult) => {
        res.cookie('SigninTokens', moduleResult, { signed: true });
        res.send({ success: true });
    }).catch((error) => {
        res.send(Object.assign({ success: false }, error));
    });
};

#Step 3

開啟 /modules/users.module.js 加上 module: userModuleSignout
使用陣列的 forEach 方法將所有啟用狀態改為 false

const userModuleSignout = (signinTokens) => {
    return new Promise((resolve, reject) => {
        signinTokens.forEach(function (item) { item.active = false; });
        resolve(signinTokens);
    });
};

因為這個專案設定「永遠只有一個帳號是登入中」所以登出時就不用先去找到要把哪個帳號登出，直接所有帳號一起登出就好xD

這樣API的部分就完成囉!!

#登出按鈕功能

登出按鈕功能比上面的API還要更簡單!!
打開前端(f2e)專案吧~

#Step 1

開啟 /views/Index.vue
先幫 [登出] 按鈕加上 click 事件:

<v-btn text outlined v-text="`登出`" @click="goToLogout"></v-btn>

#Step 2

對應的事件內容呼叫剛才做好的API:

goToLogout() {
  const api = `${process.env.VUE_APP_APIPATH}/users/signout`;
  this.$http({
    method: "POST",
    url: api,
  })
    .then((response) => {
      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });
},

• 呼叫成功跑 .then 區塊
• 呼叫失敗跑 .catch 區塊

#Step 3

後端回覆 success = true 代表成功登出，這時再次呼叫 getSigninTokens() 方法來更新帳戶清單

if (response.data.success) {
  this.getSigninTokens();
  console.log("帳戶移除成功");
}

#結果

到這邊登出功能就完成囉~
來看一下效果:

今天沒什麼重點，就是複習API建立及前端呼叫API而已~

有需要改進或是任何意見建議歡迎下面留言~