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

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

5
const BASE_URL = '';
6

7
// 请求拦截器
8
const requestInterceptor = (config:
9
RequestInit) => {
10
  const token = localStorage.getItem
11
  ('accessToken');
12
  const headers = new Headers(config.
13
  headers);
14

15
  if (token) {
16
    headers.set('Authorization',
17
    `Bearer ${token}`);
18
  }
19
  headers.set('Accept', 'application/
20
  json');
21

22
  return { ...config, headers,
23
  credentials: 'include' as
24
  RequestCredentials };
25
};
26

27
// 响应拦截器
28
const responseInterceptor = async
29
(response: Response) => {
30
  if (response.status === 401) {
31
    // 处理401错误
32
    localStorage.removeItem
33
    ('accessToken');
34
    localStorage.removeItem
35
    ('refreshToken');
36
    localStorage.removeItem
37
    ('isAuthenticated');
38
    localStorage.removeItem('username');
39
    localStorage.removeItem('role');
40
    window.dispatchEvent(new Event
41
    ('loginStatusChanged'));
42
    ElMessage.error('登录已过期，请重新登录
43
    ');
44
    router.push('/Login');
45
    throw new Error('Unauthorized');
46
  }
47

48
  if (!response.ok) {
49
    const error = await response.json().
50
    catch(() => ({}));
51
    throw new Error(error.detail ||
52
    error.msg || '请求失败');
53
  }
54

55
  return response.json();
56
};
57

58
// 统一请求方法
59
export const api = {
60
  async get<T = any>(url: string,
61
  params?: Record<string, any>):
62
  Promise<T> {
63
    let fullUrl = BASE_URL + url;
64
    if (params) {
65
      const searchParams = new
66
      URLSearchParams();
67
      Object.entries(params).forEach
68
      (([key, value]) => {
69
        if (value !== undefined &&
70
        value !== null) {
71
          searchParams.append(key,
72
          String(value));
73
        }
74
      });
75
      fullUrl += `?${searchParams.
76
      toString()}`;
77
    }
78

79
    const config = requestInterceptor({
80
    method: 'GET' });
81
    const response = await fetch
82
    (fullUrl, config);
83
    return responseInterceptor
84
    (response);
85
  },
86

87
  async post<T = any>(url: string, data?
88
  : any, options?: { headers?:
89
  Record<string, string> }): Promise<T>
90
  {
91
    const headers: Record<string,
92
    string> = options?.headers || {
93
    'Content-Type': 'application/
94
    json' };
95
    const config = requestInterceptor({
96
      method: 'POST',
97
      headers,
98
      body: data ? (headers
99
      ['Content-Type'] === 'application/
100
      json' ? JSON.stringify(data) :
101
      data) : undefined
102
    });
103

104
    const response = await fetch
105
    (BASE_URL + url, config);
106
    return responseInterceptor
107
    (response);
108
  },
109

110
  async put<T = any>(url: string, data?
111
  : any): Promise<T> {
112
    const config = requestInterceptor({
113
      method: 'PUT',
114
      headers: { 'Content-Type':
115
      'application/json' },
116
      body: data ? JSON.stringify(data)
117
      : undefined
118
    });
119

120
    const response = await fetch
121
    (BASE_URL + url, config);
122
    return responseInterceptor
123
    (response);
124
  },
125

126
  async delete<T = any>(url: string):
127
  Promise<T> {
128
    const config = requestInterceptor({
129
    method: 'DELETE' });
130
    const response = await fetch
131
    (BASE_URL + url, config);
132
    return responseInterceptor
133
    (response);
134
  }
135
};