feat: 初始化Vue3项目并添加基础功能
添加Pinia状态管理、Vue Router路由、Element Plus UI组件库和Axios请求库 配置Vite别名和TS路径映射 实现用户登录、路由守卫和请求拦截功能 添加全局类型定义和工具函数
This commit is contained in:
47
src/api/request.ts
Normal file
47
src/api/request.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/userStore'
|
||||
|
||||
const request: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
||||
timeout: 10000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
const userStore = useUserStore()
|
||||
if (userStore.token) {
|
||||
config.headers.Authorization = `Bearer ${userStore.token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
request.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
const { data } = response
|
||||
if (data.code !== 200) {
|
||||
ElMessage.error(data.message || '请求失败')
|
||||
return Promise.reject(new Error(data.message))
|
||||
}
|
||||
return data
|
||||
},
|
||||
(error) => {
|
||||
const { response } = error
|
||||
if (response?.status === 401) {
|
||||
const userStore = useUserStore()
|
||||
userStore.clearUser()
|
||||
window.location.href = '/login'
|
||||
}
|
||||
ElMessage.error(response?.data?.message || '网络错误')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
23
src/api/userApi.ts
Normal file
23
src/api/userApi.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import request from './request'
|
||||
|
||||
export interface LoginParams {
|
||||
username: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export interface LoginResult {
|
||||
token: string
|
||||
userInfo: Record<string, any>
|
||||
}
|
||||
|
||||
export function login(data: LoginParams) {
|
||||
return request.post<LoginResult>('/user/login', data)
|
||||
}
|
||||
|
||||
export function getUserInfo() {
|
||||
return request.get('/user/info')
|
||||
}
|
||||
|
||||
export function logout() {
|
||||
return request.post('/user/logout')
|
||||
}
|
||||
Reference in New Issue
Block a user