request.js 1
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
import qs from 'qs'
const request = axios.create({
timeout: 2000
// baseURL:
// Headers:
})
function getBaseURL (url) {
if (url.startsWith('/boss')) {
return 'http://eduboss.lagou.com'
} else {
return 'http://edufront.lagou.com'
}
}
// 请求拦截器
request.interceptors.request.use(config => {
// 判断 config.url 的前缀,来进行请求 baseURL 的设置
config.baseURL = getBaseURL(config.url)
// 统一设置Token 信息
const { user } = store.state
if (user && user.access_token) {
config.headers.Authorization = user.access_token
}
return config
})
// 响应拦截器
request.interceptors.response.use(response => {
// 状态码 2xx 会响应这里
// console.log('响应成功了', response)
return response
}, (error) => {
if (error.response) {
// 请求发送成功,响应接收完毕,但状态码为失败的原因
// console.log(error.response.data)
// console.log(error.response.status)
// console.log(error.response.headers)
// 1、判断失败的状态码情况(主要处理 401 的情况)
const { status } = error.response
let errorMessage = ''
if (status === 400) {
errorMessage = '请求参数错误'
} else if (status === 401) {
// Token过期
// errorMessage = 'Token过期'
// 1、没有Token信息(无登录)
if (!store.state.user) {
// 跳转登录页面
router.push({
name: 'login',
query: {
// currentRoute就是存储了路由信息的对象
redirect: router.currentRoute.fullPath
}
})
return Promise.reject(error)
}
// 检查是否正在刷新 token
let isRefreshing = false
// 2、 Token 无效 (错误的Token、Token过期)
// 发送请求,获取新的access_token
if (isRefreshing) {
return
}
// 开始刷新状态
isRefreshing = true
return request({
method: 'POST',
url: '/front/user/refresh_token',
data: qs.stringify({
refreshtoken: store.state.user.refresh_token
})
}).then(res => {
// 刷新成功后
// 存储新的token
store.commit('setUser', res.data.content)
// 重新发送失败的请求
// error.config是本次失败请求的配置对象
return request(error.config)
}).catch(err => {
console.log(err)
}).finally(() => {
// 响应处理完毕,结束刷新状态
isRefreshing = false
}
)
} else if (status === 403) {
errorMessage = '没有权限,请联系管理员'
} else if (status === 404) {
errorMessage = '请求资源不存在'
} else if (status === 500) {
errorMessage = '服务器错误,请联系管理员'
}
// console.log(errorMessage)
Message.error(errorMessage)
} else if (error.request) {
// 请求发送成功,但没有收到响应
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
Message.error(error.request)
} else {
// 意料之外的错误
// Something happened in setting up the request that triggered an Error
Message.error(error.message)
}
// 将本次请求的错误对象继续向后抛出,让接收响应的处理函数进行操作
return Promise.reject(error.response.data)
})
export default request
request.js 2
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// console.log(res.code)
// console.log(res.msg)
if (res.code === 200 || res.code === 300) {
return res
}
// 系统报错报500
if (res.code === 500) {
return Promise.reject(res)
}
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
confirmButtonText: 'Re-Login',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service