vue.js添加攔截器，實現token認證（使用axios）

什麼是token？

token是一個用戶自定義的任意字符串，目前開發中，token都是在服務端生成而且token的值會保存到服務器後臺。只有服務器和客戶端知道這個字符串，因而，這個token就成了二者之間的祕鑰，它可讓服務器確認請求是來自客戶端仍是惡意的第三方。

爲何使用token？

簡單地說，token的使用就是爲了數據安全，前臺是經過接口路徑（URL）的調用來獲取數據的，若是惡意的第三方知道了某一個接口路徑，那麼，他即可以直接經過接口路徑在網頁上直接獲取該接口的全部數據信息。若是添加了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等操做感興趣，但願關注下一篇文章~~~~~