vue+axios全局添加请求头和参数操作


Posted in Javascript onJuly 24, 2020

走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种:(具体使用哪种需要和后台商量)

1、放在请求头中

2、放在接口的参数中

1、放在请求头中

下面代码是从本地cookie中拿token

VueCookie:一个用于处理浏览器cookies的简单Vue.js插件.

// 在封装axios的文件中添加拦截器
// 添加请求拦截器,在请求头中加token
service.interceptors.request.use(
 config => {
 // 判断本地的cookie中是否有token
 if (VueCookie.isKey('token')) {
 config.headers.Authorization = VueCookie.get('token')
 } else {
 // 跳转到登录页面(这里使用router,是因为路由文件引入到了此文件里)
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

这个时候虽然在请求头中放了token,但是后台并拿不到token的值,我们需要在创建axios对象的时候允许请求携带cokie,也可以加到main.js全局里面。

// 放在请求文件中
const service = axios.create({
 baseURL: "http://XXXXXXXXX:XXXX",
 timeout: 10000,
 withCredentials: true // 允许携带cookie
});
// 放在全局main.js中
import axios from "axios";
axios.defaults.withCredentials = true; // 允许携带cookie

2、放在参数中

以下代码是从本地存储localStorage中拿token

// 添加请求拦截器,在参数中加token
service.interceptors.request.use(
 config => {
 // 将token添加到每一个接口的参数中
 // 判断请求的类型:如果是post请求就把默认参数拼到data里面;如果是get请求就拼到params里面
 const token = localStorage.getItem('ISTOKEN')
 if (localStorage.getItem('ISTOKEN')) {
 // 注意:config.method 的判断值必须是小写的post和get
 if (config.method === 'post') {
 config.data = {
  api_token: token,
  ...config.data
 }
 } else if (config.method === 'get') {
 config.params = {
  api_token: token,
  ...config.params
 }
 }
 } else {
 // 跳转到登录页面(这里使用router,是因为路由文件引入到了此文件里)
 router.push('/login')
 }
 return config
 },
 error => {
 return Promise.reject(error)
 })

补充知识:Vue,POST请求头'Content-Type':'application/json;',data上传方法

如下所示:

vue+axios全局添加请求头和参数操作

transformRequest 方法说明axios中文文档

以上这篇vue+axios全局添加请求头和参数操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 #Javascript
vuex存取值和映射函数使用说明
Jul 24 #Javascript
js实现金山打字通小游戏
Jul 24 #Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 #Javascript
js实现滑动滑块验证登录
Jul 24 #Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
页面使用密码保护代码
2013/04/10 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python 解压pkl文件的方法
2018/10/25 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
Python 串口通信的实现
2020/09/29 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
应聘自荐书
2013/10/08 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
电台编导求职信
2014/05/06 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
材料员岗位职责
2015/02/10 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python