©2020-2024 ioDraw All rights reserved,
Privacy Policy
拦截器原理和作用
*
首先拦截器在src/utils/request.js 文件中，拦截器分为请求拦截器和响应拦截器。
*
页面中的每一个请求都会经过请求拦截和响应拦截，所以一般在这个文件进行操作。
*
这一文件一般引入axios，vuex，Message，router 和相关方法 ，基地址+拦截器。
*
请求拦截器：Token的主动处理 给每一个请求添加请求头token 对请求异常抛出。
*
响应拦截器：简化axios默认加了一层的data Token被动处理 对请求异常抛出。
最简化版本
// 导入axios import axios from 'axios' // 基地址 const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 5秒超时 timeout: 10000 }) // 请求拦截
request.interceptors.request.use( config => { return config }, error => {
return Promise.reject(error) } ) // 响应拦截 request.interceptors.response.use( res
=> { return res }, // 响应错误的代码写这里 error => { return Promise.reject(error) } ) //
暴露副本 export default service
下面是实际开发中使用
注意：
当我们使用axios时候，他会给我们默认加一层data。这样我们取数据的时候就会比较增加无效代码，所以我们可以在数据响应的时候判断，给他人为的去掉一层，如下面判断
return data ，这样就可以直接res.data.变量
还有一个是token 处理
这里包含了主动处理：登录时候存一个时间，判断这个时间，超过就调用登出方法，提示信息，打回到登录页。被动处理：异常的时候判断一下，如果是和后端规定好的token过期状态码（比如401），就调用登出方法，提示信息，打回到登录页。
基地址最好不要写死写变量名，这样我们就可以通过改环境文件快速更改地址。
// 导入axios import axios from 'axios' // 导入提示信息 import { Message } from
'element-ui' // 导入vuex import store from '@/store' // 导入路由 import router from
'@/router' // 导入获取时间和token的工具函数 import { getToken, getTokenTime } from
'@/utils/auth' // 基地址 const service = axios.create({ baseURL:
process.env.VUE_APP_BASE_API, // 5秒超时 timeout: 10000 }) // 请求拦截 //
添加一个service的请求拦截器 service.interceptors.request.use( async config => { //
config就是本次发请求的信息 // 判断有没有token if (store.state.user.token) { // token失效的主动处理 //
获取一下记录token的时间 let start = getTokenTime() // 获取一下当前时间 let now = Date.now() //
算出时间差 let hour = (now - start) / 1000 / 3600 // 判断是否超过1小时 if (hour >= 1) { //
代表token过期 await store.dispatch('user/logout') Message.error('token已过期,请重新登录')
router.push('/login') // return代表不往下执行，所以这个请求不会发送 return }
config.headers.Authorization = 'Bearer ' + getToken() config.headers['Bearer']
= getToken() // config.headers.tenantid = getTenantId () } // 发送请求 return
config }, error => { return Promise.reject(error) } ) // 响应拦截
service.interceptors.response.use( res => { // axios默认加了一层data //
这个res包括这个请求响应回来的所有信息 // 所有的接口请求都会回到这里 // 获取到本次请求得到的数据 const data = res.data //
会帮所有的请求打印 // console.log(data); // 判断本次请求是否成功 if (data.code === 200 ||
data.code == 0) { // 如果响应成功，则正常给他返回数据 return data } else { //
证明失败，我们需要让外面的catch被调用 // 要让catch被调用，就要手动抛出一个错误，并把服务器返回的消息抛回去
Message.warning(data.message || data.msg) return Promise.reject(data.message) }
}, async error => { // token失效的被动处理 console.log(error) if
(error.response.data.code === 401) { await store.dispatch('user/logout')
Message.warning('登录状态过期，请重新登录！') router.push('/login') } else { return
Promise.reject(error) } } // error => { // return Promise.reject(error) // } )
// 暴露副本 export default service
浏览器存取
总结：
经过这一趟流程下来相信你也对 Vue 拦截器原理和详细使用 有了初步的深刻印象，但在实际开发中我
们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕