一.安装
1.速度慢
npm install axios -g
2.速度快
cnpm install axios -g
二、使用
1.点击项目名右键新建一个vue.config.js文件(用于解决跨域)
// 跨域配置
module.exports = {
devServer: { //设置本地默认端口 选填
port: 9876, //vue端口号
proxy: { //设置代理
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
target: 'http://localhost:9000', //代理目标的地址
changeOrigin: true, //是否设置同源
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
2.新建一个配置文件夹存放request.js
import axios from 'axios'
import router from "@/router";
const request = axios.create({
baseURL: "/api",
timeout: 5000
})
// 白名单,将不会被拦截校验权限
const whiteUrls = ["/login", '/register']
// request 拦截器
// 可以发送前对请求做一些处理、比如统一加token,数据加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// 取出sessionStorage里面缓存的用户信息
let token= sessionStorage.getItem("token")
if (!whiteUrls.includes(config.url)) { // 校验请求白名单
if(!userJson) {
router.push("/login")
} else {
let user = JSON.parse(userJson);
config.headers['token'] = token; // 设置请求头
}
}
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
// 验证token
if (res.code === '401') {
console.error("token过期,重新登录")
router.push("/login")
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request