token驗證機制
最近在vue-cli項目實現登錄的過程中用到了token驗證，在此總結如下
1. 登錄時,客戶端通過用戶名與密碼請求登錄 2. 服務端收到請求去驗證用戶名與密碼 3. 驗證通過,服務端會簽發一個Token,再把這個Token以響應發給客戶端. 4. 客戶端收到Token,存儲到本地,如Cookie,SessionStorage,LocalStorage.我們是存在cookie 5. 客戶端每次像服務器請求API接口時候,都要帶上Token. 6. 客戶端每次跳轉路由的時候也要驗證Token登錄態 7. 服務端收到請求,驗證Token,如果通過就返回數據,否則提示報錯信息.
第一步：通過用戶名+密碼獲取token，存cookie
第二步：路由跳轉進行登錄態校驗
首先先比較一下下面兩段代碼
結果：第一段代碼在頁面進行路由跳轉的時候會陷入死循環
原因：next后面帶路徑跳轉時會重新調用router.beforeEach，next后不加參數跳轉時不會執行beforeEach
第三步：axios請求攔截器配置token，校驗請求時的登錄態
此處遇到的坑：
axios請求頭部token的設置——因為axios.defaults.headers設置只在頁面初始化的時候獲取一次，會導致在頁面發起請求的時候不會重新去獲取登陸態，這樣就出現個問題，不論是否處於登陸態，已登陸的狀態會一直存在，為了避免這個問題，就需要在請求內部去設置獲取token，於是把攜帶token的頭部設置放在axios的請求攔截器里，每次請求都重新獲取以便拿到最新的登陸態，這里有個坑就是在請求攔截器里設置頭部要用自定義設置，而不能用axios.defaults.headers默認設置，因為默認設置是優先於請求攔截器執行的，假如用了默認設置，其實設置的是下一次請求的請求頭而非本次請求（token是在axios.defaults.headers中攜帶的）
第四步：axios響應攔截器更新cookie
這樣做是考慮到用戶體驗，防止用戶在使用系統過程中由於cookie到期而中斷退出系統
總結
因為本次開發后端只是根據前端調接口時是否傳token來判斷是否登錄，並未進行登錄校驗，所以考慮的點比較多。考慮不周請指正