拦截器应用场景以及如何使用

以前都没怎么注意拦截器，今天好好去吸收理解一下，想去优化一下自己项目

项目优化一共两点：

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博客