vue element admin UI之请求与响应拦截

1.本文章讲述的是 VUE element admin UI中拦截器的作用  我们先来讲一下请求的原理

requert2.js 这里有小小的改动  把之前的requert.js替换成requert2.js因为请求的端口太多了  

在requert2.js里引入import axios from 'axios'  然后定义请求格式  

复制const instance = axios.create({     timeout: 20000,     baseURL: process.env.VUE_APP_BASE_API,     headers: {         'Content-Type': "application/json",     } })

2.定义请求头拦截

instance .interceptors.request.use(     config => {         config.headers['Authorization'] = 'Bearer' + getToken()         return config     },     error => {         return Promise.reject(error)     } )

在请求头里面定义token是因为在请求之前想做什么，就是每次请求之前刷新token 这样才能做到token时刻更新时刻判断

getToken()是定义的对token存储在 auth.js的处理  如果用到token引入auth.js就好  Promise的作用请自行百度

 请求头拦截除了做token刷新的作用 还可以做其他的作用具体看业务逻辑

2.请求头响应拦截

var ccc = function(instance) {     instance.interceptors.response.use(         response => {             return response         }, error => {             if (error.response.data.code == 401) {                 MessageBox.confirm('您token已过期,请确认后请重新登录', ).then(() => {                     store.dispatch('user/resetToken').then(() => {                         location.reload()                     })                 })             } else if (error.response.data.code == 500) {                 return error             } else {                 return error             }         }     ) } 我这里是对请求响应做了一个封装 ，因为后端服务太多导致端口太多，这里响应成功和失败对应的是response，error 两种 可以做失败与成功相应的处理