Vue+axios(interceptors) 实现http拦截以及全局headers增加token以及签名等严重
引用的各个外部库请自行下载安装 路由文件我就不往外贴了,common.js是下面的那个代码import Vue from 'vue'import axios from 'axios'import router from '@/router'import qs from 'qs'import merge from 'lodash/merge'import { Message } fr...
·
引用的各个外部库请自行下载安装 路由文件我就不往外贴了,common.js是下面的那个代码
import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { Message } from 'element-ui'
import md5 from 'js-md5'
import { sortObjASCII } from '@/utils/common.js'
const http = axios.create({
timeout: 1000 * 60,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
})
/**
* 请求拦截
*/
http.interceptors.request.use(config => {
var dataSign = sortObjASCII(qs.parse(config.data))
let timeStr = Date.parse(new Date()) / 1000
var defaults = {
'rqquestTime': timeStr,
'sign': md5(md5(qs.stringify(dataSign) + '&t=' + timeStr + '&46465465464'))
}
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
config.headers['sign'] = defaults.sign // 签名 按照ASCII码进行排序后的双层md5加密
config.headers['rqquestTime'] = defaults.rqquestTime // 请求时间
return config
}, error => {
return Promise.reject(error)
})
/**
* 响应拦截
*/
http.interceptors.response.use(response => {
// console.log(response)
if (response.data && response.data.code === 401) { // 401, token失效
Vue.cookie.delete('token')
router.options.isAddDynamicMenuRoutes = false
router.push({ name: 'login' })
}
if (response.data.code === '-9') {
Message.error('请先登录')
setTimeout(() => { // 返回请先登录的状态码 回跳登录
Vue.cookie.delete('token')
router.options.isAddDynamicMenuRoutes = false
router.push({ name: 'login' })
}, 600)
}
if (response.data.code === '-10') {
Message.error('暂无权限')
setTimeout(() => { // 返回请先登录的状态码 回跳登录
router.options.isAddDynamicMenuRoutes = false
router.push({ name: 'jurisdiction' })
}, 600)
}
return response
}, error => {
if (error.response.status) {
switch (error.response.status) {
// 404请求不存在
case 404:
Message.error('服务器被外星人抓走了~')
setTimeout(() => { // 返回请先登录的状态码 回跳登录
router.options.isAddDynamicMenuRoutes = false
router.push({ name: '404' })
}, 600)
break
// 其他错误,直接抛出错误提示
default:
Message.error('服务器发生意外错误,错误code:' + error.response.status)
}
}
return Promise.reject(error)
})
/**
* 请求地址处理
* @param {*} actionName action方法名称
*/
http.adornUrl = (actionName) => {
// 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}
/**
* get请求参数处理
* @param {*} params 参数对象
* @param {*} openDefultParams 是否开启默认参数?
*/
http.adornParams = (params = {}, openDefultParams = true) => {
var defaults = {
// 't': new Date().getTime()
}
return openDefultParams ? merge(defaults, params) : params
}
/**
* post请求数据处理
* @param {*} data 数据对象
* @param {*} openDefultdata 是否开启默认数据?
* @param {*} contentType 数据格式
* json: 'application/json; charset=utf-8'
* form: 'application/x-www-form-urlencoded; charset=utf-8'
*/
http.adornData = (data = {}, openDefultdata = true, contentType = 'text') => {
// var dataSign = sort_ASCII(JSON.stringify(data))
var defaults = {
// 't': new Date().getTime()
}
data = openDefultdata ? merge(defaults, data) : data
return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}
/**
* 向url后加参数
*/
http.addUrlParam = function (url = '', params = {}) {
if (url && JSON.stringify(params) != '{}') {
var paramArray = []
Object.keys(params).forEach(function (key) {
var param = key + '=' + params[key]
paramArray.push(param)
})
var url2 = encodeURI(url + '?' + paramArray.join('&'))
var enurl = encodeURI(url2)
return enurl
} else {
return url
}
}
export default http
common.js自定义的对象排序方法
// 对象重新排序
export function sortObjASCII (obj) {
var arr = Object.keys(obj).sort()
if (arr.length === 0) {
return {}
}
var sortObj = {}
for (var ii in arr) {
sortObj[arr[ii]] = obj[arr[ii]]
}
return sortObj
}
使用方法
在main.js进行注册到原型链上
import Vue from 'vue'
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
import axios from 'axios'
import { isAuth } from '@/utils'
import '@/utils/directives.js'
import preview from 'vue-photo-preview'
//自己选取吧
Vue.use(VueCookie)
Vue.use(preview)
Vue.use(VueAreaLinkage)
Vue.config.productionTip = false
// 非生产环境, 适配mockjs模拟数据 // api: https://github.com/nuysoft/Mock
if (process.env.NODE_ENV !== 'production') {
require('@/mock')
}
// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法;
Vue.prototype.$axios = axios
Vue.prototype.$cookie = VueCookie
Vue.prototype.isAuth = isAuth // 权限方法
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
this.$http({
url: this.$http.adornUrl('/api/xxxx/xxxxx'),
method: 'post',
data: this.$http.adornData(this.ruleForm) //参数
}).then(({ data }) => {//返回值 业务处理
loading.close()
if (data.code === '1') {
this.$message({
type: 'success',
message: data.msg
})
this.reload()
this.visible = false
} else {
this.$message({
type: 'error',
message: data.msg
})
}
})
更多推荐
已为社区贡献3条内容
所有评论(0)