以前都没怎么注意拦截器,今天好好去吸收理解一下,想去优化一下自己项目
项目优化一共两点:
1、不同的管理员登录,页面进行了token控制权限,我给每个请求都设置了headers,没必要,既不优雅也麻烦,如下图所示。
2、每次请求都添加了/api,实在是不够优雅,这些公共url可以进行抽取
如果有同学问/api啥意思,这个就是由于跨域进行了路径重写,具体原因不在这里解释,传送门基于Shiro+Springboot+Mybatis+Vue权限管理系统(精)_江河地笑的博客-CSDN博客
拦截器是什么?
通俗易懂的就是 ?|——|? 这串字符,——号代表请求数据到返回数据给前端 |是分割符
左边的?代表在请求后端数据前对数据做了额外处理
右边的?代表在请求后端数据后对数据进行了额外处理
所以我们需要在请求前处理数据,例如添加token,添加 baseURL等
请求后对后端的状态码等进行处理
封装拦截器
首先在utils/下新建service.js
代码很好理解
import axios from 'axios'
import token from '@/token/token'
import { Message } from 'element-ui'
const service = axios.create({
baseURL: '/api',
timeout: 3000
})
service.interceptors.request.use((config) => {
// 在发送前做些什么
// 获取并设置token
// console.log(getToken('token'))
config.headers['token'] = token.isLoginToken()
return config
}, (error) => {
return Promise.reject(error)
})
service.interceptors.response.use((response) => {
// 对响应数据做些什么
// let { status, message } = response.data
// if (status !== 200) {
// Message({type: 'warning', message: message || 'error'})
// }
return response
}, (error) => {
// 对响应错误做点什么
return Promise.reject(error)
})
export default service
接口中使用拦截器
vue页面中调用接口
参考文章,传送门:Vue项目实战中token和axios的二次封装使用,一起来写出优雅的项目结构_北海的大鱼的博客-CSDN博客