拦截器是什么？

一、概念

拦截器分为两种：

请求拦截器 和 响应拦截器

请求拦截器一般会统一在请求头中添加token；响应拦截器一般会处理异常错误信息,以及遇到401后跳转登录页

拦截器的作用主要是在axios请求和响应之前拦截请求

二、应用场景

1、请求拦截器应用场景：

  可以给所有的axios请求设置请求头

（1）不使用拦截器： 我们需要手动给页面每一个axios都设置请求头

（2）使用拦截器： 只需要在拦截器中给axios设置请求头即可（因为所有的axios请求都会先进入请求拦截器）

语法：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 本地有token就在请求头添加token
    if (localStorage.getItem('token')) {
        config.headers.Authorization = localStorage.getItem('token')
    }
    return config
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
})

2、响应拦截器应用场景：

（1）拦截401，如果遇到401错误就可以直接跳转登录页

（2）对请求错误统一处理：弹出提示框

语法：

// 添加响应拦截器
axios.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        return response
    },
    function (error) {
        // 对响应错误做点什么
        // 如果是401错误，说明token没有 或 过期，就跳转登录页
        if (error.response.status === 401) {
            //  删除过期的token
            localStorage.removeItem('token')
            alert('请先登录')
            location.href = './login.html'
        } else {//其他的错误，就弹出提示框
            Toast.fail(error.response.data.message)
        }
        return Promise.reject(error)
    })