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

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

项目优化一共两点:

1、不同的管理员登录,页面进行了token控制权限,我给每个请求都设置了headers,没必要,既不优雅也麻烦,如下图所示。

拦截器应用场景以及如何使用_第1张图片

2、每次请求都添加了/api,实在是不够优雅,这些公共url可以进行抽取

如果有同学问/api啥意思,这个就是由于跨域进行了路径重写,具体原因不在这里解释,传送门基于Shiro+Springboot+Mybatis+Vue权限管理系统(精)_江河地笑的博客-CSDN博客

拦截器是什么?

通俗易懂的就是 ?|——|?   这串字符,——号代表请求数据到返回数据给前端 |是分割符

左边的?代表在请求后端数据前对数据做了额外处理

右边的?代表在请求后端数据后对数据进行了额外处理

所以我们需要在请求前处理数据,例如添加token,添加 baseURL等

请求后对后端的状态码等进行处理

封装拦截器

首先在utils/下新建service.js

拦截器应用场景以及如何使用_第2张图片

代码很好理解

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

 接口中使用拦截器

拦截器应用场景以及如何使用_第3张图片

 vue页面中调用接口

拦截器应用场景以及如何使用_第4张图片 

 参考文章,传送门:Vue项目实战中token和axios的二次封装使用,一起来写出优雅的项目结构_北海的大鱼的博客-CSDN博客

 

你可能感兴趣的