# authentication-angular-project

**Repository Path**: yulece-application/authentication-angular-project

## Basic Information

- **Project Name**: authentication-angular-project
- **Description**: 一个专注于Angular框架的认证与授权开源项目，提供安全、高效的用户身份验证和权限管理解决方案。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-19
- **Last Updated**: 2025-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PmsAdminWeb

PmsAdminWeb 是一个基于 Angular 17 的现代化管理系统前端框架，提供了完整的权限管理、用户管理、部门管理等功能模块。

## 🚀 项目特点

- **模块化架构**：采用清晰的模块化设计，便于功能扩展和维护
- **响应式布局**：适配不同屏幕尺寸的设备
- **权限管理**：完整的权限控制系统，支持细粒度权限控制
- **现代化UI**：集成 Angular Material 和 NG-ZORRO 组件库
- **服务端渲染**：支持 SSR，提升首屏加载速度和SEO

## 🛠️ 技术栈

- **前端框架**：Angular 17
- **UI组件库**：Angular Material、NG-ZORRO
- **构建工具**：Angular CLI
- **状态管理**：RxJS
- **路由管理**：Angular Router
- **样式处理**：SCSS
- **服务端渲染**：Angular SSR

## 📁 项目结构

```
src/
├── app/
│   ├── core/              # 核心模块，包含服务、接口、常量等
│   │   ├── constants/     # 常量定义
│   │   ├── guards/        # 路由守卫
│   │   ├── interceptors/  # HTTP拦截器
│   │   ├── interfaces/    # 接口定义
│   │   └── services/      # 核心服务
│   ├── features/          # 功能模块
│   │   ├── auth/          # 认证相关功能
│   │   ├── blog/          # 博客管理
│   │   ├── dashboard/     # 仪表盘
│   │   ├── settings/      # 系统设置
│   │   ├── success/       # 成功页面
│   │   └── system/        # 系统管理（用户、权限、部门等）
│   ├── layout/            # 布局组件
│   └── shared/            # 共享组件和模块
├── environments/          # 环境配置
├── assets/                # 静态资源
└── styles.scss            # 全局样式
```

## 🔧 快速开始

### 前提条件

- Node.js (v18.18.0 或更高版本)
- npm (v9.0.0 或更高版本)
- Angular CLI (v17.0.0 或更高版本)

### 安装依赖

```bash
# 安装项目依赖
npm install
```

### 开发服务器

启动本地开发服务器：

```bash
# 启动开发服务器
npm start

# 或使用Angular CLI
ng serve
```

服务器启动后，访问 [http://localhost:4200/](http://localhost:4200/) 即可查看应用。

### 构建项目

构建用于生产环境的应用：

```bash
# 生产环境构建
npm run build

# 或使用Angular CLI
ng build
```

构建产物将生成在 `dist/pms-admin-web/` 目录下。

### 运行单元测试

使用Karma测试运行器执行单元测试：

```bash
npm test

# 或使用Angular CLI
ng test
```

### 服务端渲染

构建并运行服务端渲染版本：

```bash
# 构建SSR版本
ng build --configuration production
ng run pms-admin-web:server:production

# 运行SSR服务
node dist/pms-admin-web/server/server.mjs
```

## 💻 开发指南

### 代码生成

使用Angular CLI生成新组件、服务等：

```bash
# 生成组件
ng generate component component-name

# 生成服务
ng generate service service-name

# 生成模块
ng generate module module-name

# 查看所有可用的生成器
ng generate --help
```

### 代理配置

项目使用代理配置解决跨域问题，配置文件为 `proxy.conf.json` 和 `proxy.conf.js`。

### 环境变量

环境配置文件位于 `src/environments/` 目录下：
- `environment.ts` - 开发环境配置
- `environment.prod.ts` - 生产环境配置

## 📚 API文档

项目通过HTTP请求与后端API交互，主要API包括：

- 用户管理
- 权限管理
- 部门管理
- 角色管理
- 模块管理

具体API详情请参考后端API文档。

## 🎯 功能模块

### 系统管理

- **用户管理**：用户的增删改查、密码重置、状态管理
- **权限管理**：权限的增删改查、权限分配
- **角色管理**：角色的增删改查、角色权限配置
- **部门管理**：部门的树形结构管理

### 内容管理

- **博客管理**：文章的创建、编辑、发布、删除

### 其他功能

- **仪表盘**：数据可视化展示
- **系统设置**：系统参数配置

## 🔐 权限控制

系统采用细粒度的权限控制机制，通过 `permission.service.ts` 提供权限相关服务，支持：

- 基于角色的访问控制
- 按钮级权限控制
- 路由级权限控制

## 📝 提交规范

请遵循以下提交消息规范：

- `feat`: 添加新功能
- `fix`: 修复Bug
- `docs`: 文档变更
- `style`: 代码格式调整
- `refactor`: 代码重构
- `test`: 添加或修改测试
- `chore`: 构建过程或辅助工具变动

## 🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'feat: Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 📧 联系我们

如有任何问题或建议，请随时联系项目维护团队。