vue中axios如何實現token驗證

bay1發表於2018-06-22
VueiOS

title: vue中axios如何實現token驗證 date: 2018-02-08 17:50:07 tags: [axios,vue]

繼上篇實現Auth認證之後,然後每個跳轉頁面都會在後端驗證token的存在 然後那天晚上通過模仿Auth傳送請求,傳送成功(上篇末尾的方式) 但是今天再繼續寫,發現每個頁面請求都要傳送token驗證 就比較麻煩了

這時候又要axios上場了 可以通過axios類似error攔截的方式攔截http request請求 這樣每次request都可以預設加上token (當然前提已經在session裡儲存了你的token驗證字串)

// main.js檔案
// http request 攔截器
axios.interceptors.request.use(
  config => {
    var token = sessionStorage.getItem('token');
    if (token) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
      token =sessionStorage.getItem('token')+':';
      config.headers.Authorization = `Basic ${new Buffer(token).toString('base64')}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  });
複製程式碼

為什麼要加":"? 這裡一開始我並沒有加冒號,然後發現新加的request頁面顯示401 但是訊息頭裡明明加上了Authorization,細看的話發現這個token和另外幾個頁面的不同 (因為另外幾個頁面的token是那天晚上的方式通過axios直接傳送的) 解碼正確的token發現是缺少冒號,具體原因不是很清楚 檢視文件似乎發現了一個合理的解釋(不知道是否正確) 文件中寫到:

新版的 verify_password 回撥函式會嘗試認證兩次。首先它會把 username 引數作為令牌進行認證。如果沒有驗證通過的話，就會像基於密碼認證的一樣,驗證username和password 然後文件curl例子類似下面的格式

$ curl -u eyJhbGciOiJIUzI1NiIsImV4cCI6MTM4NTY2OTY1NSwiaWF0IjoxMzg1NjY5MDU1fQ.eyJpZCI6MX0.XbOEFJkhjHJ5uRINh2JA1BPzXjSohKYDRT472wGOvjc:unused -i -X GET http://127.0.0.1:5000/api/resource
HTTP/1.0 200 OK
Content-Type: application/json
Content-Length: 30
Server: Werkzeug/0.9.4 Python/2.7.3
Date: Thu, 28 Nov 2013 20:05:08 GMT

{
  "data": "Hello, miguel!"
}
複製程式碼

我們會看到這個 token:unused 的格式 然後request時會加上冒號

相關文章