什麼是token？
token是一個使用者自定義的任意字串，目前開發中，token都是在服務端生成並且token的值會儲存到伺服器後臺。只有伺服器和客戶端知道這個字串，於是，這個token就成了兩者之間的祕鑰，它可以讓伺服器確認請求是來自客戶端還是惡意的第三方。
為什麼使用token？
基於token驗證的流程
- 客戶端使用使用者名稱跟密碼請求登入
- 服務端收到請求，去驗證使用者名稱和密碼（後臺根據請求去資料庫查詢是否有該使用者）
- 驗證成功後，服務端會簽發一個token（該token值一般都會存入Redis資料庫中，並設定過期時間），再把這個token傳送給客戶端
- 客戶端收到token之後，一般儲存在localStorage（HTML5新特性，只要不手動刪除儲存的內容，儲存的資訊會一直存在）中
- 客戶端每次向服務端請求資源的時候需要帶著服務端簽發的token
- 服務端收到請求，然後去驗證客戶端請求裡面帶著的token（token是否為該使用者的令牌以及token是否有效等），如果驗證成功，就向客戶端返回請求的資料
什麼是axios？
Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
官方網址：www.axios.com/
中文文件：www.kancloud.cn/yunye/axios…
vue實現axios攔截，token驗證
在簡單介紹完這些基礎知識以及用到的外掛之後，我們便要開始今天的主題--token驗證。
首先在vue.js 中下載axios，npm install axios,在main.js檔案中全域性使用：
import axios from 'axios';
Vue.prototype.$http = axios;
複製程式碼這樣引入之後，在其他的檔案中便可以使用$http來呼叫介面：
getRoomDetail() {
this.$http.get(this.roomDetailApi).then(
res => {
this.roomDetail = res.data.data;
},
err => {
console.log("接受資料錯誤" + err);
}
).catch(err => {
console.log("伺服器錯誤" + err);
})
}
複製程式碼以上步驟只是簡單的實現了前後臺的互動（在前臺呼叫後臺介面來獲取資料），接下來我們便要進一步學習，實現token的驗證。
根據上面的介紹，我們在成功登入後臺並拿到返回給的token之後，需要使用localStorage全域性儲存，實現程式碼如下：
// 使用者登入
login() {
this.postData = {
account: this.userInfo.account,
password: this.$md5(this.userInfo.password),
};
this.$http.post(configIp.apiConfig.user.login, this.postData)
.then(res => {
if (res.data.errno === 0) {
this.$Message.success('登陸成功');
this.$router.push('roomInfo');
//全域性儲存token
window.localStorage["token"] = JSON.stringify(res.data.data.token);
} else {
this.$Message.error('登入失敗');
this.forgetPassword = true;
}
}).catch(err => {
console.log("登入失敗");
})
},
複製程式碼接下來，我們要做的就是設定請求頭，在之後的介面請求過程中，都要通過token的認證來獲取資料，新增 http.js 檔案（攔截器）
import axios from 'axios';
import router from './router';
// axios 配置
axios.defaults.timeout = 8000;
axios.defaults.baseURL = 'https://api.github.com';
// http request 攔截器
axios.interceptors.request.use(
config => {
if (localStorage.token) { //判斷token是否存在
config.headers.Authorization = localStorage.token; //將token設定成請求頭
}
return config;
},
err => {
return Promise.reject(err);
}
);
// http response 攔截器
axios.interceptors.response.use(
response => {
if (response.data.errno === 999) {
router.replace('/');
console.log("token過期");
}
return response;
},
error => {
return Promise.reject(error);
}
);
export default axios;
複製程式碼新增攔截器之後，修改 main.js檔案：
將上面
import axios from 'axios';
Vue.prototype.$http = axios;
複製程式碼改為：
import http from './http'; //此處問http檔案的路徑
Vue.prototype.$http = http;
複製程式碼完成該步驟之後，基本的操作已經實現了，下面讓我們檢視一下是否已經新增請求頭：
以上操作實現了新增請求頭token，在之後的請求中，會自動新增該請求頭，但是不是每一個頁面都需要登入許可權（後臺會實現不需要進行token驗證的篩選），那麼前臺也需要通過路由的meta標籤對需要做校驗的路由頁面進行標記，其他頁面則不需要驗證，程式碼如下:
{
path: '/userInfo',
name: 'userInfo',
meta: {
requireAuth: true, // 該路由項需要許可權校驗
}
component: userInfo
}, {
path: '/userList',
name: 'userList', // 該路由項不需要許可權校驗
component: userInfo
}
複製程式碼之後，我們可以定義一個路由防衛，每次路由跳轉，我們都來做一下許可權校驗，參考程式碼如下：
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判斷該路由是否需要登入許可權
if (localStorage.token) { // 獲取當前的token是否存在
console.log("token存在");
next();
} else {
console.log("token不存在");
next({
path: '/login', // 將跳轉的路由path作為引數，登入成功後跳轉到該路由
query: {redirect: to.fullPath}
})
}
}
else { // 如果不需要許可權校驗，直接進入路由介面
next();
}
});
複製程式碼到此，用vue.js實現前臺新增請求頭，通過axios設定攔截器新增token就已經實現了。
如果對node.js實現生成token，處理token等操作感興趣，希望關注下一篇文章~~~~~
