Vue專案中的API管理及封裝 — jwt身份驗證篇

此篇文章為 Vue專案中的API管理及封裝 的延伸，基本概念可以先閱讀那篇文章

JWT (JSON Web Token) 是近期後端常作為身份認證的驗證技術，前端只需在header攜帶token並發送request到後端，便可驗證身份及取到資料。後端如何實作jwt驗證，可以參考 Golang — JSON Web Tokens(JWT) 示範。

本篇會學習到的知識：

1. 使用vuex管理後端發來的jwt token
2. 封裝axios，每次request自動攜帶token
3. 重新設計封裝，掛載到vue原型

1. 使用vuex管理jwt token

vuex可參考 Vue專案中Vuex + Vuetify封裝設計 中的介紹

為了做全局的管理，需要透過vuex來記錄jwt token。首先在store/modules中建立auth.js作為管理身份認證的模組。

├─── store
│   ├─── modules
│   │    └─── auth.js

• state

state: {
 token: "", // 存放jwt token
 isLogin: false // 是否登入
}

接著在store/index.js中掛上auth模組。

其中，因為vuex在重新整理或是換頁後，資料會被清除，因此這邊使用vuex-persistedstate將state的資料持久化。這邊只指定auth將資料存進localStorage。

• 使用yarn載入vuex-persistedstate

yarn add vuex-persistedstate

到這邊就完成auth的模組註冊到vuex中！

2. 封裝axios，每次request自動攜帶token

基於Vue專案中的API管理及封裝的教學中，新增jwt token的封裝

在apis/https.js中，在errorHandle方法中，新增認證過期的處理

接著在request攔截器中，新增在header中攜帶token

3. 重新設計封裝，掛載到vue原型

為了讓api調用更方便，把api掛載到vue的prototype上。

其中，api可能會有版本號的分別，也可以封裝後更方便管理。

首先在apis 中建立auth.js，撰寫關於認證相關的api

接著在apis中建立v1資料夾，集中管理v1版本的api。

在v1資料夾中建立index.js及users.js。

• users.js：管理api/v1/users/..的相關api
• index.js：導出v1內的所有api

把users.js掛入v1/index.js統一導出v1版本的api

在apis資料夾內建立index.js，導出所有的api

現在的目錄結構長這樣～

├─── apis
│   ├─── v1
│   │    ├─── index.js
│   │    └─── auth.js
│   ├─── auth.js
│   ├─── https.js
│   ├─── index.js
│   └─── utils.js

最後把api掛載到vue的prototype上

最後就可以這樣使用api了！

大家也別忘了在登入成功後，取到的jwt token要記錄到vuex auth裡面呦！

取得 users 的資料

如此一來就可以讓api更方便的被呼叫了！也更結構化了呢！

喜歡的話請留下您的clap clap ！！