vue+axios全局添加请求头和参数操作
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
走登录的接口都会返回一个token值,然后存起来方便之后调接口的时候给后台传过去,传给后台的方式有两种(具体使用哪种需要和后台商量)
1、放在请求头中
2、放在接口的参数中
1、放在请求头中
狼蚁网站SEO优化代码是从本地cookie中拿token
VueCookie
// 在封装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上传方法
如下所示
transformRequest 方法说明
以上这篇vue+axios全局添加请求头和参数操作就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程