封装拦截器

前端封装拦截器是为了统一处理请求和响应，可以用于添加请求头、处理请求参数、统一处理错误等操作。以下是前端封装拦截器的一般步骤：

1. 创建一个拦截器文件（如request.js），用于定义拦截器的逻辑。

2. 在拦截器文件中引入axios库（或其他HTTP请求库）和Vue框架。

3. 创建一个拦截器实例，通过axios的create()方法创建。

4. 添加请求拦截器：在请求发送前进行拦截，可以在此处添加请求头、处理请求参数等操作。使用interceptors.request.use()方法。

5. 添加响应拦截器：在接收到响应后进行拦截，可以在此处统一处理错误、格式化数据等操作。使用interceptors.response.use()方法。

6. 在Vue实例中引入拦截器文件，并将拦截器实例挂载到Vue原型上，使其在整个应用中都能使用到。

7. 在需要发送请求的地方，直接使用axios实例发送请求，拦截器会自动处理请求和响应。

// request.js：

// 拦截器属于“工具类”，可放置到utils目录中
src/utils/request.js
import axios from "axios"
import { Message } from 'element-ui';
// 创建实例
const http = axios.create({
    baseURL:"/api",
    timeout:5000, // 超时时间
});
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么    比如验证token
    if (window.localStorage.token) {
// 如果存在，则在请求的headers中添加Authorization字段，并将token值设置为config.headers.Authorization
    config.headers.Authorization = window.localStorage.token;
  }
    return config;
},function (error) {
    return Promise.reject(error);
})

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做些什么  比如验证token是否过期
    if(response.data.msg == "登录成功") {
        Message.success("登录成功")
    } else if(response.data.msg == "token已过期"){
        Message.warning("登录已过期，请重新登录");
        // 跳转到登录页面
        return location.pathname = "/login"
    }
    return response
},function (error) {
    retrun Promise.reject(error);
});
// 暴露封装好的的拦截器http
export default http;

// main.js

import Vue from 'vue';
import App from './App.vue';
import axios from './request.js';

Vue.prototype.$axios = axios;

new Vue({
  render: h => h(App),
}).$mount('#app');