vue中axios如何实现token验证

可以通过axios类似error拦截的方式拦截http request请求 这样每次request都可以默认加上token (当然前提已经在session里存储了你的token验证字符串)

在main.js文件中添加 http request拦截器

import Axios from 'axios'
Vue.prototype.$http = Axios
Axios.defaults.baseURL = 'https://www.escook.cn:8888/api/private/v1/'
// http request 拦截器
Axios.interceptors.request.use(function (config) {

 // 通过拦截request请求,主动为 请求头,追加新属性 Authorization,等于 token 值

  config.headers.Authorization = window.sessionStorage.getItem('token')

return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 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发现是缺少冒号,具体原因不是很清楚 查看文档似乎发现了一个合理的解释(不知道是否正确) 文档中写到:

$ 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时会加上冒号