Add 'frontend/' from commit '94f710850fa74ad3aaca5b65318f2fec9e1a2cdf'
git-subtree-dir: frontend git-subtree-mainline: 3f114b2cc3ad1bfe7399c1c78b54da47a88a3638 git-subtree-split: 94f710850fa74ad3aaca5b65318f2fec9e1a2cdf
This commit is contained in:
carry
commit
b705bbfa7d
24
frontend/.gitignore
vendored
Normal file
24
frontend/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
frontend/.vscode/extensions.json
vendored
Normal file
3
frontend/.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
5
frontend/README.md
Normal file
5
frontend/README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
131
frontend/devdoc.md
Normal file
131
frontend/devdoc.md
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
## 项目概述
|
||||||
|
|
||||||
|
本项目是一个用户管理系统，前端部分使用 Vue.js 作为主要框架，结合 Vue Router 进行路由管理，Pinia 进行状态管理，Element Plus 作为 UI 组件库。前端需要实现登录页面和用户管理页面，并根据用户角色控制页面元素的显示与隐藏，特别是对修改和删除按钮的权限控制。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
* Typescript
|
||||||
|
* Vue.js：前端框架，用于构建用户界面。
|
||||||
|
* Vue Router：用于管理前端路由。
|
||||||
|
* Pinia：用于状态管理，存储用户登录状态、角色信息等。
|
||||||
|
* Element Plus：UI 组件库，提供丰富的 UI 组件。
|
||||||
|
* Axios：用于与后端 API 进行通信。
|
||||||
|
* Vite：构建工具，用于快速开发和打包项目。
|
||||||
|
* npm：包管理工具
|
||||||
|
* pinia-plugin-persistedstate：用于状态持久化存储
|
||||||
|
* jwt-decode：用于解析JWT令牌
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
frontend/
|
||||||
|
├── src/
|
||||||
|
│ ├── api/ # API 服务相关
|
||||||
|
│ ├── components/ # 公共组件
|
||||||
|
│ ├── router/ # 路由配置
|
||||||
|
│ ├── store/ # 状态管理
|
||||||
|
│ ├── views/ # 页面视图
|
||||||
|
│ ├── App.vue # 根组件
|
||||||
|
│ ├── main.ts # 入口文件
|
||||||
|
│ └── style.css # 全局样式
|
||||||
|
├── index.html # 主页面
|
||||||
|
├── package.json # 项目依赖
|
||||||
|
├── vite.config.ts # Vite 配置
|
||||||
|
└── tsconfig.json # TypeScript 配置
|
||||||
|
```
|
||||||
|
|
||||||
|
## 页面设计
|
||||||
|
|
||||||
|
### 1. 登录页面 (`loginPage`)
|
||||||
|
|
||||||
|
#### UI 组件安排
|
||||||
|
|
||||||
|
* 用户名输入框：使用 Element Plus 的 `el-input` 组件，用于输入用户名。
|
||||||
|
* 密码输入框：使用 Element Plus 的 `el-input` 组件，类型为 `password`，用于输入密码。
|
||||||
|
* 登录按钮：使用 Element Plus 的 `el-button` 组件，点击后触发登录逻辑。
|
||||||
|
|
||||||
|
#### 功能描述
|
||||||
|
|
||||||
|
* 用户输入用户名和密码后，点击登录按钮，前端通过 Axios 发送登录请求到后端 `/api/auth/login` 接口。
|
||||||
|
* 登录成功后，前端将获取到的 `access_token` 和 `refresh_token` 存储在 Pinia 状态管理中，并跳转到用户管理页面。
|
||||||
|
* 登录失败时，前端显示错误提示。
|
||||||
|
|
||||||
|
### 2. 用户管理页面 (`managePage`)
|
||||||
|
|
||||||
|
#### UI 组件安排
|
||||||
|
|
||||||
|
* 导航栏：使用 Element Plus 的 `el-menu` 组件，显示欢迎信息和当前用户信息
|
||||||
|
* 登出按钮：使用 Element Plus 的 `el-button` 组件，位于页面右上角，点击后触发登出逻辑。
|
||||||
|
* 用户列表：使用 Element Plus 的 `el-table` 组件，展示用户信息，包括 `ID`、`用户名`、`角色`、`描述` 等字段。
|
||||||
|
* 创建用户按钮：使用 Element Plus 的 `el-button` 组件，仅管理员可见，点击后弹出创建用户对话框。
|
||||||
|
* 修改按钮：使用 Element Plus 的 `el-button` 组件，位于每一行的操作列中，点击后弹出修改对话框。
|
||||||
|
* 删除按钮：使用 Element Plus 的 `el-button` 组件，位于每一行的操作列中，点击后触发删除逻辑。
|
||||||
|
* 修改对话框：使用 Element Plus 的 `el-dialog` 组件，用于修改用户信息。
|
||||||
|
|
||||||
|
#### 功能描述
|
||||||
|
|
||||||
|
* 用户列表展示：前端通过 Axios 发送请求到 `/api/users` 接口，获取用户列表数据，并在表格中展示。
|
||||||
|
* 创建用户：管理员点击创建用户按钮后，弹出创建用户对话框，填写信息后提交。
|
||||||
|
* 修改按钮的显示与隐藏：根据当前登录用户的角色，动态控制修改按钮的显示与隐藏。只有 `系统管理员` 和 `管理员` 可以看到并操作修改按钮。
|
||||||
|
* 删除按钮的显示与隐藏：根据当前登录用户的角色，动态控制删除按钮的显示与隐藏。只有 `系统管理员` 和 `管理员` 可以看到并操作删除按钮。
|
||||||
|
* 修改用户信息：点击修改按钮后，弹出修改对话框，用户可以在对话框中修改用户名、角色和描述信息。修改完成后，前端通过 Axios 发送请求到 `/api/users/{user_id}` 接口，更新用户信息。
|
||||||
|
* 删除用户：点击删除按钮后，前端通过 Axios 发送请求到 `/api/users/{user_id}` 接口，删除对应用户。
|
||||||
|
|
||||||
|
## 权限控制
|
||||||
|
|
||||||
|
### 1. 修改和删除按钮的权限控制
|
||||||
|
|
||||||
|
* 系统管理员、管理员：可以看到并操作所有用户的修改和删除按钮。
|
||||||
|
* 普通用户：无法看到修改和删除按钮，只能查看用户列表。
|
||||||
|
|
||||||
|
#### 实现逻辑
|
||||||
|
|
||||||
|
* 前端在用户登录成功后，从后端获取用户角色信息，并存储在 Pinia 状态管理中。
|
||||||
|
* 在用户管理页面中，前端根据当前用户的角色动态渲染表格中的操作列。如果当前用户是 `普通用户`，则不渲染修改和删除按钮；如果是 `系统管理员` 或 `管理员`，则渲染这些按钮。
|
||||||
|
|
||||||
|
### 2. 路由权限控制
|
||||||
|
|
||||||
|
* 登录页面：所有用户都可以访问。
|
||||||
|
* 用户管理页面：只有登录成功的用户才能访问。如果用户未登录，尝试访问用户管理页面时，前端应自动跳转到登录页面。
|
||||||
|
|
||||||
|
#### 实现逻辑
|
||||||
|
|
||||||
|
* 使用 Vue Router 的导航守卫（`beforeEach`）进行路由权限控制。在每次路由跳转前，检查 Pinia 中是否存储了有效的 `access_token`。如果没有，则跳转到登录页面。
|
||||||
|
|
||||||
|
## Token 管理
|
||||||
|
|
||||||
|
### 1. Access Token 和 Refresh Token 的存储
|
||||||
|
|
||||||
|
* 登录成功后，前端将 `access_token` 和 `refresh_token` 存储在 Pinia 状态管理中，并设置 `access_token` 的过期时间。
|
||||||
|
* 每次发送 API 请求时，前端从 Pinia 中获取 `access_token` 并添加到请求头中。
|
||||||
|
* 使用 pinia-plugin-persistedstate 插件将 token 存储在 localStorage 中，实现状态持久化
|
||||||
|
|
||||||
|
### 2. Token 自动刷新
|
||||||
|
|
||||||
|
* 前端在每次发送 API 请求前，检查 `access_token` 是否即将过期（例如，剩余有效期小于 5 分钟）。如果即将过期，前端使用 `refresh_token` 调用 `/api/auth/refresh` 接口，获取新的 `access_token` 和 `refresh_token`，并更新 Pinia 中的存储。
|
||||||
|
* 使用 Axios 的拦截器统一处理 token 刷新逻辑，避免在每个请求中重复编写代码。
|
||||||
|
|
||||||
|
## 状态管理
|
||||||
|
|
||||||
|
### 用户登录状态
|
||||||
|
|
||||||
|
* 使用 Pinia 存储用户登录状态，包括 `access_token`、`refresh_token`、用户角色、用户名、用户ID等信息。
|
||||||
|
* 在用户登出时，清除 Pinia 中的登录状态。
|
||||||
|
* 使用 pinia-plugin-persistedstate 插件进行状态持久化，在应用启动时自动从 localStorage 恢复状态
|
||||||
|
|
||||||
|
## 开发环境配置
|
||||||
|
|
||||||
|
1. 安装依赖：
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. 启动开发服务器：
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 构建生产环境：
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>RBAC</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
603
frontend/openapi.json
Normal file
603
frontend/openapi.json
Normal file
@ -0,0 +1,603 @@
|
|||||||
|
{
|
||||||
|
"openapi": "3.0.2",
|
||||||
|
"info": {
|
||||||
|
"title": "User Management System",
|
||||||
|
"description": "API for managing users with role-based access control",
|
||||||
|
"version": "1.0.0"
|
||||||
|
},
|
||||||
|
"paths": {
|
||||||
|
"/api/auth/login": {
|
||||||
|
"post": {
|
||||||
|
"tags": [
|
||||||
|
"auth",
|
||||||
|
"auth"
|
||||||
|
],
|
||||||
|
"summary": "Login",
|
||||||
|
"operationId": "login_api_auth_login_post",
|
||||||
|
"requestBody": {
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/LoginRequest"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/TokenResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"/api/auth/refresh": {
|
||||||
|
"post": {
|
||||||
|
"tags": [
|
||||||
|
"auth",
|
||||||
|
"auth"
|
||||||
|
],
|
||||||
|
"summary": "Refresh Token",
|
||||||
|
"operationId": "refresh_token_api_auth_refresh_post",
|
||||||
|
"requestBody": {
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/RefreshTokenRequest"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/TokenResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"/api/users/": {
|
||||||
|
"get": {
|
||||||
|
"tags": [
|
||||||
|
"users",
|
||||||
|
"users"
|
||||||
|
],
|
||||||
|
"summary": "Get Users List",
|
||||||
|
"operationId": "get_users_list_api_users__get",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"required": false,
|
||||||
|
"schema": {
|
||||||
|
"title": "Page",
|
||||||
|
"type": "integer",
|
||||||
|
"default": 1
|
||||||
|
},
|
||||||
|
"name": "page",
|
||||||
|
"in": "query"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"required": false,
|
||||||
|
"schema": {
|
||||||
|
"title": "Limit",
|
||||||
|
"type": "integer",
|
||||||
|
"default": 100
|
||||||
|
},
|
||||||
|
"name": "limit",
|
||||||
|
"in": "query"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"required": false,
|
||||||
|
"schema": {
|
||||||
|
"title": "Role",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"name": "role",
|
||||||
|
"in": "query"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"title": "Response Get Users List Api Users Get",
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"$ref": "#/components/schemas/UserResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"security": [
|
||||||
|
{
|
||||||
|
"OAuth2PasswordBearer": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"post": {
|
||||||
|
"tags": [
|
||||||
|
"users",
|
||||||
|
"users"
|
||||||
|
],
|
||||||
|
"summary": "Create User",
|
||||||
|
"operationId": "create_user_api_users__post",
|
||||||
|
"requestBody": {
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/UserCreate"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"responses": {
|
||||||
|
"201": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/UserResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"security": [
|
||||||
|
{
|
||||||
|
"OAuth2PasswordBearer": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"/api/users/{user_id}": {
|
||||||
|
"get": {
|
||||||
|
"tags": [
|
||||||
|
"users",
|
||||||
|
"users"
|
||||||
|
],
|
||||||
|
"summary": "Get User",
|
||||||
|
"operationId": "get_user_api_users__user_id__get",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"required": true,
|
||||||
|
"schema": {
|
||||||
|
"title": "User Id",
|
||||||
|
"type": "integer"
|
||||||
|
},
|
||||||
|
"name": "user_id",
|
||||||
|
"in": "path"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/UserResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"security": [
|
||||||
|
{
|
||||||
|
"OAuth2PasswordBearer": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"put": {
|
||||||
|
"tags": [
|
||||||
|
"users",
|
||||||
|
"users"
|
||||||
|
],
|
||||||
|
"summary": "Update User",
|
||||||
|
"operationId": "update_user_api_users__user_id__put",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"required": true,
|
||||||
|
"schema": {
|
||||||
|
"title": "User Id",
|
||||||
|
"type": "integer"
|
||||||
|
},
|
||||||
|
"name": "user_id",
|
||||||
|
"in": "path"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"requestBody": {
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/UserUpdate"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"required": true
|
||||||
|
},
|
||||||
|
"responses": {
|
||||||
|
"200": {
|
||||||
|
"description": "Successful Response",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/UserResponse"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"security": [
|
||||||
|
{
|
||||||
|
"OAuth2PasswordBearer": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"delete": {
|
||||||
|
"tags": [
|
||||||
|
"users",
|
||||||
|
"users"
|
||||||
|
],
|
||||||
|
"summary": "Delete User",
|
||||||
|
"operationId": "delete_user_api_users__user_id__delete",
|
||||||
|
"parameters": [
|
||||||
|
{
|
||||||
|
"required": true,
|
||||||
|
"schema": {
|
||||||
|
"title": "User Id",
|
||||||
|
"type": "integer"
|
||||||
|
},
|
||||||
|
"name": "user_id",
|
||||||
|
"in": "path"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"responses": {
|
||||||
|
"204": {
|
||||||
|
"description": "Successful Response"
|
||||||
|
},
|
||||||
|
"422": {
|
||||||
|
"description": "Validation Error",
|
||||||
|
"content": {
|
||||||
|
"application/json": {
|
||||||
|
"schema": {
|
||||||
|
"$ref": "#/components/schemas/HTTPValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"security": [
|
||||||
|
{
|
||||||
|
"OAuth2PasswordBearer": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"components": {
|
||||||
|
"schemas": {
|
||||||
|
"HTTPValidationError": {
|
||||||
|
"title": "HTTPValidationError",
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"detail": {
|
||||||
|
"title": "Detail",
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"$ref": "#/components/schemas/ValidationError"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"LoginRequest": {
|
||||||
|
"title": "LoginRequest",
|
||||||
|
"required": [
|
||||||
|
"username",
|
||||||
|
"password"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"username": {
|
||||||
|
"title": "Username",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"password": {
|
||||||
|
"title": "Password",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"RefreshTokenRequest": {
|
||||||
|
"title": "RefreshTokenRequest",
|
||||||
|
"required": [
|
||||||
|
"refresh_token"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"refresh_token": {
|
||||||
|
"title": "Refresh Token",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"TokenResponse": {
|
||||||
|
"title": "TokenResponse",
|
||||||
|
"required": [
|
||||||
|
"access_token",
|
||||||
|
"refresh_token",
|
||||||
|
"token_type",
|
||||||
|
"access_token_exp",
|
||||||
|
"refresh_token_exp"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"access_token": {
|
||||||
|
"title": "Access Token",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"refresh_token": {
|
||||||
|
"title": "Refresh Token",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"token_type": {
|
||||||
|
"title": "Token Type",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"access_token_exp": {
|
||||||
|
"title": "Access Token Exp",
|
||||||
|
"type": "integer"
|
||||||
|
},
|
||||||
|
"refresh_token_exp": {
|
||||||
|
"title": "Refresh Token Exp",
|
||||||
|
"type": "integer"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"UserCreate": {
|
||||||
|
"title": "UserCreate",
|
||||||
|
"required": [
|
||||||
|
"username",
|
||||||
|
"password"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"username": {
|
||||||
|
"title": "Username",
|
||||||
|
"maxLength": 50,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户名"
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"allOf": [
|
||||||
|
{
|
||||||
|
"$ref": "#/components/schemas/UserRole"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "用户角色",
|
||||||
|
"default": "user"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"title": "Description",
|
||||||
|
"maxLength": 255,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户描述"
|
||||||
|
},
|
||||||
|
"password": {
|
||||||
|
"title": "Password",
|
||||||
|
"maxLength": 255,
|
||||||
|
"minLength": 6,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户密码"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"UserResponse": {
|
||||||
|
"title": "UserResponse",
|
||||||
|
"required": [
|
||||||
|
"username",
|
||||||
|
"id",
|
||||||
|
"created_at",
|
||||||
|
"updated_at"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"username": {
|
||||||
|
"title": "Username",
|
||||||
|
"maxLength": 50,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户名"
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"allOf": [
|
||||||
|
{
|
||||||
|
"$ref": "#/components/schemas/UserRole"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "用户角色",
|
||||||
|
"default": "user"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"title": "Description",
|
||||||
|
"maxLength": 255,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户描述"
|
||||||
|
},
|
||||||
|
"id": {
|
||||||
|
"title": "Id",
|
||||||
|
"type": "integer",
|
||||||
|
"description": "用户ID"
|
||||||
|
},
|
||||||
|
"created_at": {
|
||||||
|
"title": "Created At",
|
||||||
|
"type": "string",
|
||||||
|
"description": "创建时间",
|
||||||
|
"format": "date-time"
|
||||||
|
},
|
||||||
|
"updated_at": {
|
||||||
|
"title": "Updated At",
|
||||||
|
"type": "string",
|
||||||
|
"description": "更新时间",
|
||||||
|
"format": "date-time"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"UserRole": {
|
||||||
|
"title": "UserRole",
|
||||||
|
"enum": [
|
||||||
|
"system_admin",
|
||||||
|
"admin",
|
||||||
|
"user"
|
||||||
|
],
|
||||||
|
"type": "string",
|
||||||
|
"description": "An enumeration."
|
||||||
|
},
|
||||||
|
"UserUpdate": {
|
||||||
|
"title": "UserUpdate",
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"username": {
|
||||||
|
"title": "Username",
|
||||||
|
"maxLength": 50,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户名"
|
||||||
|
},
|
||||||
|
"role": {
|
||||||
|
"allOf": [
|
||||||
|
{
|
||||||
|
"$ref": "#/components/schemas/UserRole"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "用户角色"
|
||||||
|
},
|
||||||
|
"description": {
|
||||||
|
"title": "Description",
|
||||||
|
"maxLength": 255,
|
||||||
|
"type": "string",
|
||||||
|
"description": "用户描述"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ValidationError": {
|
||||||
|
"title": "ValidationError",
|
||||||
|
"required": [
|
||||||
|
"loc",
|
||||||
|
"msg",
|
||||||
|
"type"
|
||||||
|
],
|
||||||
|
"type": "object",
|
||||||
|
"properties": {
|
||||||
|
"loc": {
|
||||||
|
"title": "Location",
|
||||||
|
"type": "array",
|
||||||
|
"items": {
|
||||||
|
"anyOf": [
|
||||||
|
{
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "integer"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"msg": {
|
||||||
|
"title": "Message",
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
|
"type": {
|
||||||
|
"title": "Error Type",
|
||||||
|
"type": "string"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"securitySchemes": {
|
||||||
|
"OAuth2PasswordBearer": {
|
||||||
|
"type": "oauth2",
|
||||||
|
"flows": {
|
||||||
|
"password": {
|
||||||
|
"scopes": {},
|
||||||
|
"tokenUrl": "auth/login"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
4049
frontend/package-lock.json
generated
Normal file
4049
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
29
frontend/package.json
Normal file
29
frontend/package.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.7.9",
|
||||||
|
"element-plus": "^2.9.3",
|
||||||
|
"jwt-decode": "^4.0.0",
|
||||||
|
"pinia": "^2.3.1",
|
||||||
|
"pinia-plugin-persistedstate": "^4.2.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.13.4",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"vite": "^6.0.5",
|
||||||
|
"vite-plugin-vue-devtools": "^7.7.2",
|
||||||
|
"vue-tsc": "^2.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
12
frontend/src/App.vue
Normal file
12
frontend/src/App.vue
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<RouterView />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
30
frontend/src/api/authService.ts
Normal file
30
frontend/src/api/authService.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import apiClient from './axiosInstance';
|
||||||
|
import type { TokenResponse } from './types';
|
||||||
|
|
||||||
|
const API_BASE_URL = '/auth';
|
||||||
|
|
||||||
|
export const authService = {
|
||||||
|
async login(username: string, password: string): Promise<TokenResponse> {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`${API_BASE_URL}/login`, { username, password });
|
||||||
|
return response.data;
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response?.data?.detail?.[0]?.msg) {
|
||||||
|
throw new Error(error.response.data.detail[0].msg);
|
||||||
|
}
|
||||||
|
throw new Error('Login failed');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async refreshToken(refreshToken: string): Promise<TokenResponse> {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.post(`${API_BASE_URL}/refresh`, { refresh_token: refreshToken });
|
||||||
|
return response.data;
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response?.data?.detail?.[0]?.msg) {
|
||||||
|
throw new Error(error.response.data.detail[0].msg);
|
||||||
|
}
|
||||||
|
throw new Error('Token refresh failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
70
frontend/src/api/axiosInstance.ts
Normal file
70
frontend/src/api/axiosInstance.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import { userStore } from '../store/userStore';
|
||||||
|
import router from '../router';
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const apiClient = axios.create({
|
||||||
|
baseURL: '/api',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
apiClient.interceptors.request.use(
|
||||||
|
async (config) => {
|
||||||
|
const store = userStore();
|
||||||
|
|
||||||
|
// 只有已登录状态才添加Authorization头
|
||||||
|
if (store.isLoggedIn) {
|
||||||
|
const accessToken = store.accessToken;
|
||||||
|
if (accessToken) {
|
||||||
|
config.headers.Authorization = `Bearer ${accessToken}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
apiClient.interceptors.response.use(
|
||||||
|
(response) => response,
|
||||||
|
async (error) => {
|
||||||
|
const store = userStore(); // 获取用户状态
|
||||||
|
|
||||||
|
// 如果未登录，直接返回错误
|
||||||
|
if (!store.isLoggedIn) {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
const originalRequest = error.config;
|
||||||
|
|
||||||
|
// 如果401错误且不是刷新token的请求
|
||||||
|
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||||
|
originalRequest._retry = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 尝试刷新 token
|
||||||
|
await store.refreshTokenMethod();
|
||||||
|
|
||||||
|
// 更新请求头并重试原始请求
|
||||||
|
originalRequest.headers.Authorization = `Bearer ${store.accessToken}`;
|
||||||
|
return apiClient(originalRequest);
|
||||||
|
} catch (refreshError) {
|
||||||
|
// 刷新 token 失败，清除登录状态并跳转登录页
|
||||||
|
store.logout();
|
||||||
|
router.push({ name: 'login' });
|
||||||
|
return Promise.reject(refreshError);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 非 401 错误或已重试过，直接返回错误
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export default apiClient;
|
||||||
41
frontend/src/api/types.ts
Normal file
41
frontend/src/api/types.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
export interface UserResponse {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
role: UserRole;
|
||||||
|
description?: string;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserCreate {
|
||||||
|
username: string;
|
||||||
|
password: string;
|
||||||
|
role?: UserRole;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UserUpdate {
|
||||||
|
username?: string;
|
||||||
|
role?: UserRole;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TokenResponse {
|
||||||
|
access_token: string;
|
||||||
|
refresh_token: string;
|
||||||
|
token_type: string;
|
||||||
|
access_token_exp: number;
|
||||||
|
refresh_token_exp: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HTTPValidationError {
|
||||||
|
detail: ValidationError[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ValidationError {
|
||||||
|
loc: (string | number)[];
|
||||||
|
msg: string;
|
||||||
|
type: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UserRole = 'system_admin' | 'admin' | 'user';
|
||||||
32
frontend/src/api/userService.ts
Normal file
32
frontend/src/api/userService.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import apiClient from './axiosInstance';
|
||||||
|
import type { UserResponse, UserCreate, UserUpdate } from './types';
|
||||||
|
|
||||||
|
const API_BASE_URL = '/users';
|
||||||
|
|
||||||
|
export const userService = {
|
||||||
|
async getUsers(page = 1, limit = 100, role?: string): Promise<UserResponse[]> {
|
||||||
|
const response = await apiClient.get(API_BASE_URL, {
|
||||||
|
params: { page, limit, role }
|
||||||
|
});
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async createUser(userData: UserCreate): Promise<UserResponse> {
|
||||||
|
const response = await apiClient.post(API_BASE_URL, userData);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateUser(userId: number, userData: UserUpdate): Promise<UserResponse> {
|
||||||
|
const response = await apiClient.put(`${API_BASE_URL}/${userId}`, userData);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async deleteUser(userId: number): Promise<void> {
|
||||||
|
await apiClient.delete(`${API_BASE_URL}/${userId}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
async getUser(userId: number): Promise<UserResponse> {
|
||||||
|
const response = await apiClient.get(`${API_BASE_URL}/${userId}`);
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
};
|
||||||
118
frontend/src/components/EditUserDialog.vue
Normal file
118
frontend/src/components/EditUserDialog.vue
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="dialogVisible" :title="props.mode === 'create' ? '创建用户' : '修改用户信息'">
|
||||||
|
<el-form :model="editForm">
|
||||||
|
<el-form-item v-if="props.mode === 'edit'" label="用户ID">
|
||||||
|
<el-input v-model="editForm.id" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="用户名">
|
||||||
|
<el-input v-model="editForm.username" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="角色">
|
||||||
|
<el-select v-model="editForm.role">
|
||||||
|
<el-option label="系统管理员" value="system_admin" />
|
||||||
|
<el-option label="管理员" value="admin" />
|
||||||
|
<el-option label="普通用户" value="user" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="props.mode === 'create'" label="密码">
|
||||||
|
<el-input v-model="editForm.password" type="password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述">
|
||||||
|
<el-input v-model="editForm.description" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="handleConfirm">确认</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import type { UserResponse, UserCreate } from '@/api/types'
|
||||||
|
import { userService } from '@/api/userService'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
mode: 'create' | 'edit',
|
||||||
|
userId?: number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const options = ref<{ userId?: number, mode?: 'create' | 'edit', onConfirm?: () => void }>({})
|
||||||
|
const editForm = ref<UserResponse & { password?: string }>({
|
||||||
|
id: 0,
|
||||||
|
username: '',
|
||||||
|
role: 'user',
|
||||||
|
description: '',
|
||||||
|
created_at: '',
|
||||||
|
updated_at: '',
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['confirm'])
|
||||||
|
|
||||||
|
const open = async (opts: { userId?: number, mode?: 'create' | 'edit', onConfirm?: () => void }) => {
|
||||||
|
options.value = opts
|
||||||
|
if (options.value.mode === 'edit' && options.value.userId) {
|
||||||
|
const user = await userService.getUser(options.value.userId)
|
||||||
|
editForm.value = { ...user }
|
||||||
|
} else {
|
||||||
|
editForm.value = {
|
||||||
|
id: 0,
|
||||||
|
username: '',
|
||||||
|
role: 'user',
|
||||||
|
description: '',
|
||||||
|
created_at: '',
|
||||||
|
updated_at: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (options.value.onConfirm) {
|
||||||
|
emit('confirm', options.value.onConfirm)
|
||||||
|
}
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleConfirm = async () => {
|
||||||
|
try {
|
||||||
|
if (props.mode === 'create') {
|
||||||
|
// 调用创建用户API
|
||||||
|
const { id, created_at, updated_at, ...createData } = editForm.value
|
||||||
|
if (!createData.password) {
|
||||||
|
throw new Error('密码不能为空')
|
||||||
|
}
|
||||||
|
await userService.createUser({
|
||||||
|
username: createData.username,
|
||||||
|
password: createData.password,
|
||||||
|
role: createData.role,
|
||||||
|
description: createData.description
|
||||||
|
} as UserCreate)
|
||||||
|
} else {
|
||||||
|
// 调用更新用户API
|
||||||
|
const { id, created_at, updated_at, ...updateData } = editForm.value
|
||||||
|
await userService.updateUser(id, updateData)
|
||||||
|
}
|
||||||
|
emit('confirm', editForm.value)
|
||||||
|
if (options.value.onConfirm) {
|
||||||
|
options.value.onConfirm()
|
||||||
|
}
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: props.mode === 'create' ? '用户创建成功' : '用户信息更新成功'
|
||||||
|
})
|
||||||
|
dialogVisible.value = false
|
||||||
|
} catch (error) {
|
||||||
|
console.error('操作失败:', error)
|
||||||
|
ElMessage({
|
||||||
|
type: 'error',
|
||||||
|
message: props.mode === 'create' ? '用户创建失败' : '用户信息更新失败'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
handleConfirm
|
||||||
|
})
|
||||||
|
</script>
|
||||||
74
frontend/src/components/UserTable.vue
Normal file
74
frontend/src/components/UserTable.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<el-table :data="users" style="width: 100%">
|
||||||
|
<el-table-column prop="id" label="ID" width="100" />
|
||||||
|
<el-table-column prop="username" label="用户名" />
|
||||||
|
<el-table-column prop="role" label="角色" />
|
||||||
|
<el-table-column prop="description" label="描述" />
|
||||||
|
<el-table-column prop="created_at" label="创建时间" width="180">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ new Date(scope.row.created_at).toLocaleString() }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="updated_at" label="更新时间" width="180">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ new Date(scope.row.updated_at).toLocaleString() }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="150" v-if="isAdmin">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<EditUserDialog ref="editDialogRef" mode="edit" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { userService } from '../api/userService';
|
||||||
|
import { userStore } from '../store/userStore';
|
||||||
|
import type { UserResponse } from '../api/types';
|
||||||
|
import EditUserDialog from './EditUserDialog.vue';
|
||||||
|
|
||||||
|
const store = userStore();
|
||||||
|
const users = ref<UserResponse[]>([]);
|
||||||
|
const isAdmin = store.isAdmin;
|
||||||
|
|
||||||
|
const fetchUsers = async () => {
|
||||||
|
try {
|
||||||
|
const data = await userService.getUsers();
|
||||||
|
console.log('获取用户列表成功:', data);
|
||||||
|
users.value = data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取用户列表失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const editDialogRef = ref<InstanceType<typeof EditUserDialog>>();
|
||||||
|
|
||||||
|
const handleEdit = (user: UserResponse) => {
|
||||||
|
editDialogRef.value?.open({
|
||||||
|
userId: user.id,
|
||||||
|
mode: 'edit',
|
||||||
|
onConfirm: () => fetchUsers()
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (user: UserResponse) => {
|
||||||
|
try {
|
||||||
|
await userService.deleteUser(user.id);
|
||||||
|
await fetchUsers();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('删除用户失败:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchUsers();
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
fetchUsers
|
||||||
|
});
|
||||||
|
</script>
|
||||||
46
frontend/src/main.ts
Normal file
46
frontend/src/main.ts
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import apiClient from './api/axiosInstance'
|
||||||
|
import { userStore } from './store/userStore'
|
||||||
|
|
||||||
|
const pinia = createPinia()
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
// 配置路由和状态管理
|
||||||
|
app.use(router)
|
||||||
|
app.use(pinia)
|
||||||
|
app.use(ElementPlus)
|
||||||
|
|
||||||
|
// 初始化userStore
|
||||||
|
const store = userStore()
|
||||||
|
|
||||||
|
// 使用插件进行持久化，监听 store 变化并保存到本地存储
|
||||||
|
store.$subscribe((_, state) => {
|
||||||
|
localStorage.setItem('authStore', JSON.stringify(state));
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听 action 执行，登录和刷新令牌后保存状态到本地存储
|
||||||
|
store.$onAction(({ name, store, after }) => {
|
||||||
|
if (name === 'login' || name === 'refreshTokenMethod') {
|
||||||
|
after(() => {
|
||||||
|
localStorage.setItem('authStore', JSON.stringify(store.$state));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化时从本地存储恢复状态
|
||||||
|
const persistedState = JSON.parse(localStorage.getItem('authStore') || '{}');
|
||||||
|
if (persistedState.accessToken && persistedState.refreshTokenToken && persistedState.role && persistedState.username && persistedState.userId !== null) {
|
||||||
|
store.$patch(persistedState);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置axios拦截器
|
||||||
|
apiClient
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
44
frontend/src/router/index.ts
Normal file
44
frontend/src/router/index.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import { userStore } from '@/store/userStore'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: () => import('@/views/LoginPage.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/manage',
|
||||||
|
name: 'manage',
|
||||||
|
component: () => import('@/views/ManagePage.vue'),
|
||||||
|
meta: { requiresAuth: true }
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)*',
|
||||||
|
redirect: '/manage'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
router.beforeEach((to, _, next) => {
|
||||||
|
//const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 如果路由需要认证但用户未登录
|
||||||
|
if (to.meta.requiresAuth && !userStore().isLoggedIn) {
|
||||||
|
next({ name: 'login' })
|
||||||
|
}
|
||||||
|
// 如果用户已登录但访问登录页
|
||||||
|
else if (to.name === 'login' && userStore().isLoggedIn) {
|
||||||
|
next({ name: 'manage' })
|
||||||
|
}
|
||||||
|
// 其他情况正常导航
|
||||||
|
else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
67
frontend/src/store/userStore.ts
Normal file
67
frontend/src/store/userStore.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { authService } from '../api/authService';
|
||||||
|
import { jwtDecode } from 'jwt-decode';
|
||||||
|
|
||||||
|
// 定义 store，包含用户认证相关状态和方法
|
||||||
|
export const userStore = defineStore('user', () => {
|
||||||
|
const accessToken = ref('');
|
||||||
|
const refreshToken = ref('');
|
||||||
|
const role = ref('');
|
||||||
|
const username = ref('');
|
||||||
|
const id = ref<number | null>(null);
|
||||||
|
|
||||||
|
// 计算属性，用于快速判断用户是否登录
|
||||||
|
const isLoggedIn = computed(() => !!accessToken.value);
|
||||||
|
const isAdmin = computed(() => ['system_admin', 'admin'].includes(role.value));
|
||||||
|
|
||||||
|
// 设置访问和刷新令牌的方法
|
||||||
|
function setTokens(tokens: { access_token: string; refresh_token: string }) {
|
||||||
|
accessToken.value = tokens.access_token;
|
||||||
|
refreshToken.value = tokens.refresh_token;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置用户角色的方法
|
||||||
|
function setRole(userRole: string) {
|
||||||
|
role.value = userRole;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户登录方法，调用 authService.login 获取令牌并设置状态
|
||||||
|
async function login(usernameParam: string, password: string) {
|
||||||
|
try {
|
||||||
|
const { access_token, refresh_token } = await authService.login(usernameParam, password);
|
||||||
|
const decoded = jwtDecode<{ sub: string; role: string; username: string; id: string }>(access_token);
|
||||||
|
setTokens({ access_token, refresh_token });
|
||||||
|
setRole(decoded.role);
|
||||||
|
username.value = decoded.username;
|
||||||
|
id.value = parseInt(decoded.id);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Login failed:', error);
|
||||||
|
const err = new Error('登录失败');
|
||||||
|
err.name = 'LoginError';
|
||||||
|
err.cause = error;
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户登出方法，清空所有状态
|
||||||
|
async function logout() {
|
||||||
|
accessToken.value = '';
|
||||||
|
refreshToken.value = '';
|
||||||
|
role.value = '';
|
||||||
|
username.value = '';
|
||||||
|
id.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新访问令牌的方法，调用 authService.refreshToken 获取新令牌并设置状态
|
||||||
|
async function refreshTokenMethod() {
|
||||||
|
try {
|
||||||
|
const { access_token, refresh_token } = await authService.refreshToken(refreshToken.value);
|
||||||
|
setTokens({ access_token, refresh_token });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Token refresh failed:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { accessToken, refreshTokenToken: refreshToken, role, username, userId: id, isLoggedIn, isAdmin, login, logout, refreshTokenMethod };
|
||||||
|
});
|
||||||
79
frontend/src/style.css
Normal file
79
frontend/src/style.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
87
frontend/src/views/LoginPage.vue
Normal file
87
frontend/src/views/LoginPage.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<h2 class="login-title">用户登录</h2>
|
||||||
|
<el-form :model="form" label-width="80px">
|
||||||
|
<el-form-item label="用户名">
|
||||||
|
<el-input v-model="form.username" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="密码">
|
||||||
|
<el-input v-model="form.password" type="password" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleLogin">登录</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { userStore } from '@/store/userStore'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
interface LoginForm {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const store = userStore()
|
||||||
|
|
||||||
|
const form = ref<LoginForm>({
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleLogin = async () => {
|
||||||
|
try {
|
||||||
|
const { username, password } = form.value
|
||||||
|
if (!username || !password) {
|
||||||
|
throw new Error('用户名和密码不能为空')
|
||||||
|
}
|
||||||
|
await store.login(username, password)
|
||||||
|
router.push({ name: 'manage' })
|
||||||
|
} catch (error: any) {
|
||||||
|
ElMessage.error(error.message || '登录失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-container {
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 100px auto;
|
||||||
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #303133;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.login-container {
|
||||||
|
margin: 50px 20px;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
122
frontend/src/views/ManagePage.vue
Normal file
122
frontend/src/views/ManagePage.vue
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<div class="manage-page">
|
||||||
|
<el-menu
|
||||||
|
mode="horizontal"
|
||||||
|
class="nav-bar"
|
||||||
|
>
|
||||||
|
<el-menu-item index="1" class="nav-title">欢迎</el-menu-item>
|
||||||
|
<el-menu-item index="2" class="user-info">
|
||||||
|
<div class="user-detail">
|
||||||
|
<span class="username">{{ userStore.username }}</span>
|
||||||
|
<span class="role">({{ userStore.role }})</span>
|
||||||
|
</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="3">
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
class="logout-btn"
|
||||||
|
@click="handleLogout"
|
||||||
|
>
|
||||||
|
登出
|
||||||
|
</el-button>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
<el-card class="page-container">
|
||||||
|
<el-text class="system-title" type="primary" size="large" tag="h1">
|
||||||
|
用户管理系统
|
||||||
|
</el-text>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
class="create-btn"
|
||||||
|
@click="handleCreateUser"
|
||||||
|
v-if="userStore.isAdmin"
|
||||||
|
>
|
||||||
|
创建用户
|
||||||
|
</el-button>
|
||||||
|
<UserTable/>
|
||||||
|
<EditUserDialog ref="editUserDialog" mode="create" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { userStore as store } from '@/store/userStore'
|
||||||
|
import UserTable from '@/components/UserTable.vue'
|
||||||
|
import EditUserDialog from '@/components/EditUserDialog.vue'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const userStore = store()
|
||||||
|
|
||||||
|
const editUserDialog = ref<InstanceType<typeof EditUserDialog>>()
|
||||||
|
const userTableRef = ref<InstanceType<typeof UserTable>>()
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
userStore.logout()
|
||||||
|
router.push({ name: 'login' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCreateUser = () => {
|
||||||
|
editUserDialog.value?.open({
|
||||||
|
mode: 'create',
|
||||||
|
onConfirm: () => {
|
||||||
|
userTableRef.value?.fetchUsers()
|
||||||
|
console.log('用户创建成功，刷新用户列表')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
userTableRef.value?.fetchUsers()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.manage-page {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-bar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-detail {
|
||||||
|
margin-top: 4px;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.role {
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout-btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
frontend/src/vite-env.d.ts
vendored
Normal file
1
frontend/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
18
frontend/tsconfig.app.json
Normal file
18
frontend/tsconfig.app.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
frontend/tsconfig.json
Normal file
7
frontend/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
frontend/tsconfig.node.json
Normal file
24
frontend/tsconfig.node.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
32
frontend/vite.config.ts
Normal file
32
frontend/vite.config.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue()
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
strictPort: true,
|
||||||
|
open: true,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://127.0.0.1:8000',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false,
|
||||||
|
rewrite: (path) => path,
|
||||||
|
followRedirects: true, // Ensure 307 redirects are handled correctly
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
preview: {
|
||||||
|
host: '0.0.0.0',
|
||||||
|
strictPort: true
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user