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 两种 可以做失败与成功相应的处理