1.配置完成router后 ，可以在router内新建request.js文件
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
//创建axios 实例
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = baseURL + request url
// withCredentials: true, // 跨域请求时发送cookie
// timeout: 5000 // 请求超时时间
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
// 在发送请求之前做些什么
// if (store.getters.token) {
// // 请求携带令牌token
// // [ token ] 是接口中定义好的字段
// // please modify it according to the actual situation
// config.headers['token'] = getToken()
// }
return config
},
error => {
// 请求报错时的操作
// //console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
// 如果自定义代码不是200，则判断为错误
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 508: 非法token; 512: 其他客户端已登录; 514: Token 已过期;
// 508:令牌非法 ; 512: 其他客户端已登录; 514: 令牌失效;
if (res.code === 508 || res.code === 512 || res.code === 514) {
// 重新登录
MessageBox.confirm('Y您已注销登录,可以点击取消留在此页面或者重新登录!', '确认退出', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
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)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
2.在根目录建vue.config.is
module.exports = {
// lintOnSave: false,
devServer:{
host:'localhost',
port:8080,
proxy:{
'/api':{
target:'http://foods.1demo.cc',//要跨域的域名
changeOrigin:true//是否开启跨域
}
}
}
}
3.新建api文件，在api文件内部建index.js
这里是接口存放调用的地方
import request from '@/router/request'
// 头部
export function Header() {
return request({
url: '/api/head/head',
method: 'get',
})
}
// 首页
export function index() {
return request({
url: '/api/index/index',
method: 'get',
})
}
