5.1 KiB
5.1 KiB
项目概述
本项目是一个用户管理系统，前端部分使用 Vue.js 作为主要框架，结合 Vue Router 进行路由管理，Pinia 进行状态管理，Element Plus 作为 UI 组件库。前端需要实现登录页面和用户管理页面，并根据用户角色控制页面元素的显示与隐藏，特别是对修改和删除按钮的权限控制。
技术栈
- Typescript
- Vue.js：前端框架，用于构建用户界面。
- Vue Router：用于管理前端路由。
- Pinia：用于状态管理，存储用户登录状态、角色信息等。
- Element Plus：UI 组件库，提供丰富的 UI 组件。
- Axios：用于与后端 API 进行通信。
- Vite：构建工具，用于快速开发和打包项目。
- npm：包管理工具
页面设计
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-button组件，位于页面右上角，点击后触发登出逻辑。 - 用户列表：使用 Element Plus 的
el-table组件，展示用户信息，包括ID、用户名、角色、描述等字段。 - 修改按钮：使用 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并添加到请求头中。
2. Token 自动刷新
- 前端在每次发送 API 请求前，检查
access_token是否即将过期（例如，剩余有效期小于 5 分钟）。如果即将过期，前端使用refresh_token调用/api/auth/refresh接口，获取新的access_token和refresh_token，并更新 Pinia 中的存储。 - 使用 Axios 的拦截器统一处理 token 刷新逻辑，避免在每个请求中重复编写代码。
状态管理
用户登录状态
- 使用 Pinia 存储用户登录状态，包括
access_token、refresh_token、用户角色等信息。 - 在用户登出时，清除 Pinia 中的登录状态。
- 将token储存在localStorage中，使用pinia-plugin-persistedstate插件进行持久化，并在启动时读取localstorage恢复状态