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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
详解iframe与frame的区别
Jan 13 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
如何手写一个简易的 Vuex
Oct 10 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 _autoload自动加载类与机制分析
2012/02/10 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python循环输出三角形图案的例子
2019/11/22 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
车辆工程专业求职信
2014/04/28 职场文书
人事经理岗位职责
2014/04/28 职场文书
有关爱国演讲稿
2014/05/07 职场文书
优秀员工演讲稿
2014/05/19 职场文书
建设工地安全标语
2014/06/07 职场文书
经济类毕业生求职信
2014/06/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript