一文详解Vue3项目中的拦截器的作用和写法

// src/utils/request.js
import axios from 'axios';
import { useUserStore } from '@/stores/user'; // Pinia 用户状态
import { ElMessage } from 'element-plus'; // UI 框架提示
// 1. 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API, // 环境变量
  timeout: 10000,
});
// 2. 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 开启 Loading（配合 Element Plus 的 v-loading 指令全局控制）
    // 这里可以添加一个全局 loading 计数器
    // 自动添加 Token
    const userStore = useUserStore();
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`;
    }
    // 处理特殊请求头（如 FormData）
    if (config.data instanceof FormData) {
      config.headers['Content-Type'] = 'multipart/form-data';
    }
    return config;
  },
  (error) => {
    // 请求配置出错（如 URL 格式错误）
    return Promise.reject(error);
  }
);
// 3. 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 关闭 Loading
    // 后端约定 code===200 为成功
    const { code, message, data } = response.data;
    if (code === 200) {
      return data; // 直接返回业务数据，简化调用
    } else {
      // 业务错误统一处理
      ElMessage.error(message || '请求失败');
      return Promise.reject(new Error(message));
    }
  },
  (error) => {
    // 网络超时、服务器 500 等错误
    if (error.response) {
      const { status } = error.response;
      if (status === 401) {
        // Token 失效：清除状态并跳转登录
        const userStore = useUserStore();
        userStore.logout();
        window.location.href = '/login';
      } else if (status === 403) {
        ElMessage.error('没有权限访问');
      } else {
        ElMessage.error(error.response.data?.message || '系统错误');
      }
    } else if (error.message.includes('timeout')) {
      ElMessage.error('请求超时，请稍后重试');
    } else {
      ElMessage.error('网络异常，请检查连接');
    }
    return Promise.reject(error);
  }
);
export default service;

<template>
  <ChildComponent />
</template>
<script setup>
import { onErrorCaptured } from 'vue';
import { ElMessage } from 'element-plus';
// 捕获后代组件的错误
onErrorCaptured((err, instance, info) => {
  console.error('子组件错误:', err, info);
  ElMessage.error('页面渲染出现异常');
  // 返回 false 阻止错误继续向上传播
  return false;
});
</script>

// main.js
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.errorHandler = (err, vm, info) => {
  console.error('全局捕获错误:', err, info);
  // 上报到 Sentry 或自己的日志平台
  // reportErrorToServer(err);
};
app.mount('#app');

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { useUserStore } from '@/stores/user';
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/login', component: () => import('@/views/Login.vue') },
    { path: '/dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } },
  ],
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  const isLoggedIn = !!userStore.token;
  if (to.meta.requiresAuth) {
    if (isLoggedIn) {
      next(); // 已登录，放行
    } else {
      next({ path: '/login', query: { redirect: to.fullPath } }); // 未登录，跳转登录
    }
  } else {
    // 如果已登录且访问登录页，直接跳转首页
    if (to.path === '/login' && isLoggedIn) {
      next({ path: '/' });
    } else {
      next();
    }
  }
});
export default router;

<script setup>
import request from '@/utils/request';
const fetchData = async () => {
  try {
    // 直接拿到 data，无需再解构
    const res = await request.get('/user/info');
    console.log(res);
  } catch (error) {
    // 拦截器已经提示了错误，这里只需处理特殊逻辑
    console.log('请求失败');
  }
};
</script>