什么是token？

token是一個(gè)用戶自定義的任意字符串，目前開發(fā)中，token都是在服務(wù)端生成并且token的值會(huì)保存到服務(wù)器后臺(tái)。只有服務(wù)器和客戶端知道這個(gè)字符串，于是，這個(gè)token就成了兩者之間的秘鑰，它可以讓服務(wù)器確認(rèn)請(qǐng)求是來自客戶端還是惡意的第三方。

為什么使用token？

簡(jiǎn)單地說，token的使用就是為了數(shù)據(jù)安全，前臺(tái)是通過接口路徑(URL)的調(diào)用來獲取數(shù)據(jù)的，如果惡意的第三方知道了某一個(gè)接口路徑，那么，他便可以直接通過接口路徑在網(wǎng)頁上直接獲取該接口的所有數(shù)據(jù)信息。如果添加了token，類似于這種惡意的行為便不會(huì)產(chǎn)生。token是在用戶登錄的時(shí)候產(chǎn)生的，在前臺(tái)登錄某一個(gè)系統(tǒng)并且獲得一個(gè)token之后，前臺(tái)需要將該token設(shè)置在請(qǐng)求頭上，以確保之后的每一次請(qǐng)求都是帶著該“令牌“的，當(dāng)然后臺(tái)的接口請(qǐng)求也設(shè)置了該請(qǐng)求頭。(如果對(duì)后臺(tái)生成token，并且對(duì)該token的設(shè)置以及存儲(chǔ)感興趣的話，請(qǐng)關(guān)注下一篇文章~~~)

基于token驗(yàn)證的流程

客戶端使用用戶名跟密碼請(qǐng)求登錄

服務(wù)端收到請(qǐng)求，去驗(yàn)證用戶名和密碼(后臺(tái)根據(jù)請(qǐng)求去數(shù)據(jù)庫查找是否有該用戶)

驗(yàn)證成功后，服務(wù)端會(huì)簽發(fā)一個(gè)token(該token值一般都會(huì)存入Redis數(shù)據(jù)庫中，并設(shè)置過期時(shí)間)，再把這個(gè)token發(fā)送給客戶端

客戶端收到token之后，一般存儲(chǔ)在localStorage(HTML5新特性，只要不手動(dòng)刪除存儲(chǔ)的內(nèi)容，存儲(chǔ)的信息會(huì)一直存在)中

客戶端每次向服務(wù)端請(qǐng)求資源的時(shí)候需要帶著服務(wù)端簽發(fā)的token

服務(wù)端收到請(qǐng)求，然后去驗(yàn)證客戶端請(qǐng)求里面帶著的token(token是否為該用戶的令牌以及token是否有效等)，如果驗(yàn)證成功，就向客戶端返回請(qǐng)求的數(shù)據(jù)

什么是axios？

Axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

vue實(shí)現(xiàn)axios攔截，token驗(yàn)證

在簡(jiǎn)單介紹完這些基礎(chǔ)知識(shí)以及用到的插件之后，我們便要開始今天的主題--token驗(yàn)證。

首先在vue.js 中下載axios，npm install axios,在main.js文件中全局使用：

import axios from 'axios';

Vue.prototype.$http = axios;

復(fù)制代碼

這樣引入之后，在其他的文件中便可以使用$http來調(diào)用接口：

getRoomDetail() {

this.$http.get(this.roomDetailApi).then(

res => {

this.roomDetail = res.data.data;

},

err => {

console.log("接受數(shù)據(jù)錯(cuò)誤" + err);

}

).catch(err => {

console.log("服務(wù)器錯(cuò)誤" + err);

})

}

復(fù)制代碼

以上步驟只是簡(jiǎn)單的實(shí)現(xiàn)了前后臺(tái)的交互(在前臺(tái)調(diào)用后臺(tái)接口來獲取數(shù)據(jù))，接下來我們便要進(jìn)一步學(xué)習(xí)，實(shí)現(xiàn)token的驗(yàn)證。

根據(jù)上面的介紹，我們?cè)诔晒Φ卿浐笈_(tái)并拿到返回給的token之后，需要使用localStorage全局存儲(chǔ)，實(shí)現(xiàn)代碼如下：

// 用戶登錄

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');

//全局存儲(chǔ)token

window.localStorage["token"] = JSON.stringify(res.data.data.token);

} else {

this.$Message.error('登錄失敗');

this.forgetPassword = true;

}

}).catch(err => {

console.log("登錄失敗");

})

},

復(fù)制代碼

接下來，我們要做的就是設(shè)置請(qǐng)求頭，在之后的接口請(qǐng)求過程中，都要通過token的認(rèn)證來獲取數(shù)據(jù)，添加 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設(shè)置成請(qǐng)求頭

}

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;

復(fù)制代碼

添加攔截器之后，修改 main.js文件：

將上面

import axios from 'axios';

Vue.prototype.$http = axios;

復(fù)制代碼

改為：

import http from './http'; //此處問http文件的路徑

Vue.prototype.$http = http;

復(fù)制代碼

完成該步驟之后，基本的操作已經(jīng)實(shí)現(xiàn)了，下面讓我們查看一下是否已經(jīng)添加請(qǐng)求頭：

以上操作實(shí)現(xiàn)了添加請(qǐng)求頭token，在之后的請(qǐng)求中，會(huì)自動(dòng)添加該請(qǐng)求頭，但是不是每一個(gè)頁面都需要登錄權(quán)限(后臺(tái)會(huì)實(shí)現(xiàn)不需要進(jìn)行token驗(yàn)證的篩選)，那么前臺(tái)也需要通過路由的meta標(biāo)簽對(duì)需要做校驗(yàn)的路由頁面進(jìn)行標(biāo)記，其他頁面則不需要驗(yàn)證，代碼如下:

{

path: '/userInfo',

name: 'userInfo',

meta: {

requireAuth: true, // 該路由項(xiàng)需要權(quán)限校驗(yàn)

}

component: userInfo

}, {

path: '/userList',

name: 'userList', // 該路由項(xiàng)不需要權(quán)限校驗(yàn)

component: userInfo

}

復(fù)制代碼

之后，我們可以定義一個(gè)路由防衛(wèi)，每次路由跳轉(zhuǎn)，我們都來做一下權(quán)限校驗(yàn)，參考代碼如下：

router.beforeEach((to, from, next) => {

if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限

if (localStorage.token) { // 獲取當(dāng)前的token是否存在

console.log("token存在");

next();

} else {

console.log("token不存在");

next({

path: '/login', // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由

query: {redirect: to.fullPath}

})

}

}

else { // 如果不需要權(quán)限校驗(yàn)，直接進(jìn)入路由界面

next();

}

});

復(fù)制代碼

到此，用vue.js實(shí)現(xiàn)前臺(tái)添加請(qǐng)求頭，通過axios設(shè)置攔截器添加token就已經(jīng)實(shí)現(xiàn)了。

如果對(duì)node.js實(shí)現(xiàn)生成token，處理token等操作感興趣，希望關(guān)注下一篇文章~~~~~

總結(jié)

以上是生活随笔為你收集整理的token拦截器android_vue.js添加拦截器，实现token认证（使用axios）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。