通过Express + Vue3从零构建一个用户认证与授权系统（一）项目结构设计

项目背景

本文基于 TypeScript + Express + Vue3 ，从零构建一个用户认证与授权管理系统。这个系统的核心部分包括前端、后端和数据库。我们需要确保各部分合理分层、易于维护和扩展，让我们一步步去实现我们的系统。

一、项目结构设计

1. 前端 (Vue 3 + Element Plus/Naive UI)

• 使用 Vue 3 的单页面应用架构，配合 Vue Router 和 Vuex/Pinia 进行路由和状态管理。
• UI 组件库选用 Element Plus/Naive UI来快速构建表单、表格、对话框等常用后台管理功能。

前端目录结构：

/frontend
├── public/                 # 静态资源
├── src/
│   ├── assets/             # 静态资源（图片、样式等）
│   ├── components/         # 公共组件
│   ├── layouts/            # 布局组件
│   ├── views/              # 各页面视图
│   ├── router/             # 路由配置
│   ├── store/              # 状态管理（Vuex/Pinia）
│   ├── services/           # 接口请求服务 (Axios等)
│   ├── utils/              # 工具函数
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── package.json
├── tsconfig.json           # TypeScript 配置
└── vite.config.js          # Vite 配置

2. 后端 (Node.js + Express + MySQL)

• 使用 Node.js 和 Express 框架来搭建 RESTful API。
• 数据库使用 MySQL，连接采用 Sequelize ORM 来管理模型和数据库交互。

后端目录结构:

/backend
├── src/
│   ├── config/             # 配置文件（数据库、swagger、logger等）
│   ├── controllers/        # 控制器 (处理业务逻辑)
│   ├── models/             # 数据库模型 (Sequelize)
│   ├── routes/             # 路由定义
│   ├── middlewares/        # 中间件（认证、错误处理等）
│   ├── types               # 自定义类型
│   ├── services/           # 业务逻辑层
│   ├── utils/              # 工具类
│   ├── app.ts              # Express 应用   
├── package.json
├── .env                    # 环境变量
└── nodemon.json            # nodemon配置
└── tsconfig.json           # ts配置

二、概要设计

1. 前端 (Vue 3 + Element Plus)

• 用户管理页面：查看、添加、编辑和删除用户。
• 权限管理页面：为不同角色设置不同权限。
• 数据统计页面：展示关键业务数据的统计与分析图表。
• 通知/消息中心：查看和管理系统消息通知。

使用 Vue Router 来管理路由，使用 Vuex/Pinia 来管理用户状态、权限和全局数据。采用 Axios 发起 HTTP 请求，和后端进行数据交互。

2. 后端 (Node.js + Express)

• 用户管理 API：增删查改用户信息，支持分页和查询。
• 登录/认证 API：使用 JWT 进行用户认证，支持权限控制。
• 角色/权限管理 API：创建和管理角色，关联权限。
• 数据统计 API：从数据库中获取业务相关数据，生成图表所需的数据。

使用 Sequelize 进行数据库操作，配合 MySQL。通过 Express 中间件实现身份验证、权限控制和错误处理。

三、接口设计

接口将采用 RESTful 风格，以下是一些基本的接口设计：

• 用户管理 API

  • GET /api/users: 获取用户列表
  • GET /api/users/:id: 获取单个用户信息
  • POST /api/users: 创建新用户
  • PUT /api/users/:id: 更新用户信息
  • DELETE /api/users/:id: 删除用户

• 角色/权限管理 API

  • GET /api/roles: 获取角色列表
  • POST /api/roles: 创建新角色
  • PUT /api/roles/:id: 更新角色
  • DELETE /api/roles/:id: 删除角色
  • GET /api/roles/:id/permissions: 获取角色的权限列表

• 认证 API

  • POST /api/auth/login: 用户登录，返回 JWT Token
  • POST /api/auth/register: 用户注册
  • GET /api/auth/profile: 获取用户信息（需登录）

• 数据统计 API

  • GET /api/stats/overview: 获取系统概览数据
  • GET /api/stats/:type: 根据类型获取统计数据

三、数据库设计

为了实现用户认证与授权，我们需要设计几个关键的数据库表：Users（用户表）、Roles（角色表）、Permissions（权限表）以及 RolePermissions（角色权限关联表）。

用户表 (Users)

用于存储用户的基本信息和认证数据。

字段名	类型	描述
id	INTEGER	主键，自增
username	STRING	用户名，唯一
email	STRING	电子邮件，唯一
phone	STRING	电话号码，唯一
avatar	STRING	头像 URL，可选
password	STRING	加密后的密码
role_id	INTEGER	关联角色表的外键
createdAt	DATE	创建时间
updatedAt	DATE	更新时间

角色表 (Roles)

用于定义系统中的不同角色。

字段名	类型	描述
id	INTEGER	主键，自增
name	STRING	角色名称，唯一
description	STRING	角色描述，可选
createdAt	DATE	创建时间
updatedAt	DATE	更新时间

权限表 (Permissions)

用于定义系统中的不同权限。

字段名	类型	描述
id	INTEGER	主键，自增
name	STRING	权限名称，唯一
description	STRING	权限描述，可选
createdAt	DATE	创建时间
updatedAt	DATE	更新时间

角色权限关联表 (RolePermissions)

用于建立角色与权限之间的多对多关系。

字段名	类型	描述
roleId	INTEGER	关联角色表的外键
permissionId	INTEGER	关联权限表的外键
createdAt	DATE	创建时间
updatedAt	DATE	更新时间

四、开发框架技术栈

前端

• Vue 3.0: 框架主流版本。
• TypeScript：增强 JavaScript 的类型系统，提升代码的可读性和维护性。
• Element Plus: UI组件库，后台系统常用，简化开发。
• Axios: 异步请求库，方便与后端 API 交互。

后端

• Node.js: 使用 Express 框架来搭建轻量级 API 服务。
• TypeScript：增强 JavaScript 的类型系统，提升代码的可读性和维护性。
• Sequelize: ORM 框架，简化与 MySQL 的数据交互。
• JWT: JSON Web Token，用于实现用户认证和授权。
• bcryptjs：用于密码加密。
• Swagger：用于 API 文档的生成和展示。
• dotenv：用于环境变量管理。
• nodemon: 用于开发时自动重启服务器。

数据库

• mysql: 用于与 MySQL 数据库通信。

总结

以上是用户权限管理系统的相关设计文档。下一篇开始搭建后端服务。