7.怎么配置一个axios来拦截前后端请求
首先创建一个axios.js文件
导入我们所需要的依赖
import axios from "axios";
import Element from 'element-ui'
import router from "./router";设置请求头和它的类型和地址
注意先注释这个url,还没有解决跨域问题,不然会出现跨域
// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({timeout: 5000,headers: {
//请求头的格式要求为json'Content-Type': 'application/json; charset=utf-8'}
})
request.interceptors.request.use(config => {
//将localStorage中的token放入请求头config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上tokenreturn config
})设置后端返回给前端数据的处理方式
//就是当后端返回给前端code的值来回馈不同的效果
request.interceptors.response.use(response => {let res = response.data;console.log("response")console.log(res)if (res.code === 200) {return response} else {Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})return Promise.reject(response.data.msg)}},error => {console.log(error)if(error.response.data) {error.message = error.response.data.msg}if(error.response.status === 401) {router.push("/login")}Element.Message.error(error.message, {duration: 3 * 1000})return Promise.reject(error)}
)
将他暴露出来
export default request然后在main.js中修改
import axios from 'axios'
Vue.prototype.$axios = axios //修改为
import request from "./axios";
Vue.prototype.$axios = request
就可以了