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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
js中的闭包学习心得
Feb 06 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 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 和 MySQL 时区的一点总结
2008/03/26 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python3.5绘制随机漫步图
2018/08/27 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Java程序员面试题
2013/07/15 面试题
计算机专业自我鉴定
2013/10/15 职场文书
最新计算机专业自荐信
2013/10/16 职场文书
办公室主任先进事迹
2014/01/18 职场文书
运动会广播稿400字
2014/01/25 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
人资专员岗位职责
2014/04/04 职场文书
死亡证明书样本说明
2014/10/18 职场文书
工作收入住址证明
2014/10/28 职场文书
酒会邀请函
2015/01/31 职场文书
培训讲师开场白
2015/06/01 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server