Vue中axios拦截器如何单独配置token


Posted in Javascript onDecember 27, 2019

在了解到cookie、session、token的作用后学习token的使用

cookie

cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端

session

session数据保存在服务端,在内存中开辟空间存储数据,session文件名即sessionID保存在cookie内,随cookie传送到服务端后在服务端匹配session文件

token

token是服务端的一种算法,如果登录成功,服务端就会根据算法生成一个字符串,将字符串传递回客户端。这个字符串就是token,安全性最高

以上都有可能受到CSRF攻击

axios拦截器会在发送请求前先进行处理,将token放进key中保存在请求头中,这个key是前后台约定好的。这样配置好后,每次发送请求的时候,请求头都会带上token传送到后台进行校验。

axios的特点(官网)

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 能转换请求和响应数据
  • 能取消请求
  • 自动转换JSON数据
  • 浏览器端支持防止CSRF(跨站请求伪造)

方法一:我们在使用axios请求的时候可以先获取我们已经存入localStorage里的token

然后在拦截器里使用[…]进行拼接

import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = process.env.VUE_APP_BASE_API;
let token = localStorage.getItem('token')
// Add a request interceptor
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  //console.log(config)
  if(config.method==='post'){
    config.data=qs.stringify({
      token:token,
      ...config.data
    })
  }else if(config.method==='get'){
    config.params={
      token:token,
      ...config.params
    }
  }
  return config;
 }, function (error) {
  // Do something with request error
  return Promise.reject(error);
 });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
 }, function (error) {
  // Do something with response error
  return Promise.reject(error);
 });

 class http{
   static get(url,params){
     return axios.get(url,params)
   }
   static post(url,params){
    return axios.post(url,params)
  }
 }
 export default http;

方法二:

axios修改全局默认配置:

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios配置拦截器:

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  return config;
//这里经常搭配token使用,将token值配置到tokenkey中,将tokenkey放在请求头中

config.headers['Authorization'] = token;


 }, function (error) {
  // Do something with request error
  return Promise.reject(error);
 });

// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
  // Do something with response data
  return response;
 }, function (error) {
  // Do something with response error
  return Promise.reject(error);
 });

这两种方法就可以让我们在axios拦截器里拼接token了,而不是每一个请求都需要加一个token值

总结

以上所述是小编给大家介绍的Vue中axios拦截器如何单独配置token,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery连缀语法如何实现
Nov 29 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue实现移动端input上传视频、音频
Aug 18 Javascript
JavaScript获取当前url路径过程解析
Dec 27 #Javascript
前端开发之便利店收银系统代码
Dec 27 #Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 #Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 #Javascript
React中使用UMEditor的方法示例
Dec 27 #Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 #Javascript
JavaScript中变量提升机制示例详解
Dec 27 #Javascript
You might like
根据中文裁减字符串函数的php代码
2013/12/03 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
javascript基本算法汇总
2016/03/09 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
js轮播图代码分享
2016/07/14 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python实现基本线性数据结构
2016/08/22 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
对Python Class之间函数的调用关系详解
2019/01/23 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Django框架请求生命周期实现原理
2020/11/13 Python
numba提升python运行速度的实例方法
2021/01/25 Python
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
党校培训思想汇报
2013/12/30 职场文书
民族团结先进个人材料
2014/02/05 职场文书
我的画教学反思
2014/04/28 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis