axios拦截器已经封装好，需要单独在页面接口重新赋值新的token
处理方式：
在入口文件main.js里引入封装好的axios拦截器
import axios from './utils/request'
Vue.prototype.$http = axios
页面使用
this.$http({
headers: {
'x-Authorization': storage.get('logoutToken')
},
url: '/users/login',
method: 'delete',
data: { exit_time: storage.get('logoutTime') }
}).then(res => {
})
这样就可以任意定义了
拦截器封装的api接口函数页面使用方式：
import request from '@/utils/request'
// 退出登录
export function loginOut(query) {
return request({
url: '/users/login',
method: 'delete',
data: query
})
}
utils的request文件里封装的拦截器如下：
里面会处理ie浏览器缓存的不请求接口的问题，还有token到期后，接口重新返回新的token重新赋值的问题
import axios from 'axios'
import store from '@/store'
import { getToken, setToken } from '@/utils/auth'
import Vue from 'vue'
import router from '@/router'
import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
// create an axios instance
const request = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10 * 1000 // request timeout
})
axios.defaults.headers.delete['Content-Type'] = 'application/json;charset=UTF-8';
// 异常拦截处理器 成功1 失败0 错误 -1
const errorHandler = (error) => {
if (error) {
const data = error.data
const token = store.getters.token
switch (error.status) {
case 403:
Vue.prototype.$notify({
message: 'Forbidden',
type: 'error',
description: data.message
});
break;
case 401:
// 测试注释后就可以 禁止401后跳转登录页
if (!(data.result && data.result.isLogin)) {
if (token) {
// 退出登录跳转
store.dispatch('user/resetToken').then(() => {
setTimeout(() => {
window.location.reload()
}, 100)
})
}
}
break;
case 308:
Vue.prototype.$notify({
message: '密码到期',
type: 'error'
})
router.replace('/editPwd')
break;
case 307:
Vue.prototype.$notify({
message: '授权到期',
type: 'error'
})
break;
case 500:
Vue.prototype.$notify({
message: '网络错误，请稍后重试',
type: 'error'
})
break;
}
}
return Promise.reject(error)
}
// request interceptor 请求拦截器
request.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
config.headers['x-Authorization'] = getToken()
// 时间戳，解决ie浏览器请求一次，不请求,获取缓存的bug
var timeArs = parseInt(new Date().getTime() / 1000) + ''
if (config.method === 'get') {
// `${config.url}?${timeArs}`,
/* get 接口 在 IE11 中，如果 GET 请求相同的 URL ，浏览器默认会使用之前的缓存数据，而不是重新请求接口，导致页面数据没有更新 */
config.params = {
_t: timeArs,
...config.params
}
}
}
return config
}, errorHandler)
// response interceptor 响应拦截器
request.interceptors.response.use(
res => {
// 获取接口返回的请求头中新添加的token，更新本地的token
if (res.headers['x-authorization']) {
// 定义赋值新的token
const newToken = res.headers['x-authorization']
// 更新新的token
setToken(newToken)
// 再发请求 request(res.config) 清空之前的baseURL否则会多一层
res.config.baseURL = ''
return request(res.config)
}
if (res.headers['content-disposition'] !== undefined) {
return res
} else {
if (res.status === 200) {
return Promise.resolve(res.data)
} else {
return Promise.reject(res.data)
}
}
},
error => {
const { response } = error;
if (response) {
// 请求已发出，但是不在2xx的范围
errorHandler(response)
}
})
export default request