import axios from 'axios' import qs from 'qs' import { MessageBox, Message, // Loading, Notification } 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: 3000 // request timeout }) // let loadingInstance // request interceptor service.interceptors.request.use( config => { const token = sessionStorage.getItem('access_token') // const csrf = store.getters.csrf if (token) { config.headers = { 'access-token': token, 'Content-Type': 'application/x-www-form-urlencoded' } } if (config.url === 'refresh') { config.headers = { 'refresh-token': sessionStorage.getItem('refresh_token'), 'Content-Type': 'application/x-www-form-urlencoded' } } // let options = { // lock: true, // fullscreen: false, // text: '数据加载中……', // // background: '#FFCC00', // spinner: 'el-icon-loading' // }; const options = { type: 'success', message: config.url, title: 'request axios ', showClose: true, duration: 3000 } Notification(options) // loadingInstance = Loading.service(options); config.method === 'post' ? config.data = qs.stringify({ ...config.data }) : config.params = { ...config.params } 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() } config.headers['Content-Type'] = 'application/x-www-form-urlencoded' return config // do something before request is sent }, error => { // do something with request error Message({ message: error || 'Error', type: 'error', duration: 5 * 1000 }) 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 options = { type: 'error', message: response.status, title: 'response status value ', showClose: true, duration: 1000 } Notification(options) // Notification.close() // 这里根据后端提供的数据进行对应的处理 console.log('response===>', response) // 定时刷新access-token // if (!response.data.value && response.data.data.message === 'token invalid') { // // 刷新token // store.dispatch('refresh').then(response => { // sessionStorage.setItem('access_token', response.data) // }).catch(error => { // throw new Error('token刷新' + error) // }) // } const res = response.data // 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('error', error) // console.log(JSON.stringify(error)); // 500的状态也应该处理一下 // 401-403的状态也应该处理一下 const text = JSON.parse(JSON.stringify(error)).response.status === 404 ? '404' : '网络异常,请重试' Message({ message: text || 'Error', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) // 假设你想移除拦截器 // axios.interceptors.request.eject(service); export default service