需求由来:公司项目外链到别公司项目或者网页(通俗的说就是通过别的随意网页跳转至你项目网页),这时公司项目就要区分是从哪个公司或者哪个网页跳转过来的,从而进行不同的接口请求(公司所有接口都要带上请求头)。大部分做法都是设置请求头来区分。做法如下:
废话不多说 直接上代码 通俗易懂:
新建一个配置文件requst.js 内容如下
1 import axios from 'axios';
2 // 设置公共请求头 3 const init = function () { 4 let url = window.location.search.toString() // 获取外链过来的连接参数部分 5 let arr = [] 6 let obj = {} // 预封装集合 7 arr = url.split('&') // 对参数切割处理 在封装 8 arr.forEach(l => { 9 l = l.split('=') 10 obj[l[0]] = l[1] 11 }) 12 // 具体有哪些参数看你们后台定义了哪些 下面的参数有 osType、deviceId、deviceChannel、language ..... 13 axios.defaults.headers.common['deviceChannel'] = 'gclife_bmp_pc'; 14 axios.defaults.headers.common['language'] = window.localStorage.defaultLanguage; 15 if (obj.osType) { // 有则赋值 16 axios.defaults.headers.common['osType'] = obj.osType 17 } else { // 没有则为空 或者默认看后台需求 18 axios.defaults.headers.common['osType'] = '' 19 }; 20 if (obj.deviceId) { 21 axios.defaults.headers.common['deviceId'] = obj.deviceId 22 } else { 23 axios.defaults.headers.common['deviceId'] = '' 24 }; 25 . 26 . 27 . 28 29 } 30 31 export default { 32 init 33 }
接下来就是在main.js引入就行了 如下:
1 // 引入请求头文件 2 import request from './request' 3 request.init() // 请求头初始化
上诉内容就是设置公共请求头的内容了。