vue中axios如何实现token验证

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都加上tokentoken =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时会加上冒号

转载于:https://juejin.im/post/5b2c850c6fb9a00e8f796aba

vue中axios如何实现token验证相关推荐

vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
解决在vue中axios请求超时的问题
解决在vue中axios请求超时的问题参考文章: (1)解决在vue中axios请求超时的问题 (2)https://www.cnblogs.com/zhouyangla/p/8757149.htm ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
vue中axios访问Java后端跨域问题解决
vue中axios访问Java后端跨域问题解决参考文章: (1)vue中axios访问Java后端跨域问题解决 (2)https://www.cnblogs.com/soinve/p/9295009 ...
解决vue中axios同步的问题
解决vue中axios同步的问题参考文章: (1)解决vue中axios同步的问题 (2)https://www.cnblogs.com/zhupanpan/p/11319305.html 备忘一下 ...
VUE中fetch结合支付宝API验证银行卡号
标题VUE中fetch结合支付宝API验证银行卡号工作中提出验证银行卡的需求,在项目基于vue的情况下,刚开始用正则,结果是不太准确换个方法就是要使用支付宝去验证用户输入的手机号 Bank组件如下 ...
vue中axios改变header为application/x-www-form-urlencoded不起作用
vue中axios改变header为application/x-www-form-urlencoded不起作用 axios默认的头是这个,一般get请求是这个头 config.headers['Con ...
【SpringBoot】44、SpringBoot中整合JWT实现Token验证（整合篇）
什么是JWT? Json web token (JWT),是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准((RFC 7519),该 token 被设计为紧凑且安全的,特别适用于分 ...

vue中axios如何实现token验证

title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue]

vue中axios如何实现token验证相关推荐

最新文章

热门文章