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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
JS实现标签页切换效果
May 04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
DOMXML函数笔记
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP7常量数组用法分析
2016/09/26 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
bootstrap table实例详解
2017/01/06 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
神经网络python源码分享
2017/12/15 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
车间工艺员岗位职责
2013/12/09 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
美丽的大脚观后感
2015/06/03 职场文书