Vue3 前端架构重构实践：从双端分离到统一响应式组件#

1
import { ElMessage } from 'element-plus';
2
import router from '@/router';
3
const BASE_URL = '';
4

5
// 统一请求拦截器：自动添加Token、处理请求头
6
const requestInterceptor = (config: RequestInit) => {
7
  const token = localStorage.getItem('accessToken');
8
  const headers = new Headers(config.headers);
9

10
  if (token) {
11
    headers.set('Authorization', `Bearer ${token}`);
12
  }
13
  headers.set('Accept', 'application/json');
14

15
  return { ...config, headers, credentials: 'include' };
16
};
17

18
// 统一响应拦截器：自动处理401、错误提示
19
const responseInterceptor = async (response: Response) => {
20
  if (response.status === 401) {
21
    // 登录过期处理
22
    localStorage.clear();
23
    window.dispatchEvent(new Event('loginStatusChanged'));
24
    ElMessage.error('登录已过期，请重新登录');
25
    router.push('/Login');
26
    throw new Error('Unauthorized');
27
  }
28

29
  if (!response.ok) {
30
    const error = await response.json().catch(() => ({}));
31
    throw new Error(error.detail || error.msg || '请求失败');
32
  }
33

34
  return response.json();
35
};
36

37
// 统一请求方法
38
export const api = {
39
  async get<T = any>(url: string, params?: Record<string, any>): Promise<T> {
40
    // ... GET请求实现，自动拼接参数
41
  },
42
  async post<T = any>(url: string, data?: any): Promise<T> {
43
    // ... POST请求实现，自动序列化数据
44
  },
45
  // ... put、delete等其他请求方法
46
};