AngularASPNETCore2WebApiAuth项目教程

最新推荐文章于 2024-11-20 14:43:24 发布

芮妍娉Keaton

最新推荐文章于 2024-11-20 14:43:24 发布

阅读量1k

点赞数 13

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00474/article/details/142297068

AngularASPNETCore2WebApiAuth项目教程

AngularASPNETCore2WebApiAuth Sample project demonstrating jwt-based authentication with an Angular (v5.2.1) frontend and ASP.NET Core 2 WebApi. Includes both local user registration with .NET Core Identity membership and facebook login scenarios. 项目地址: https://gitcode.com/gh_mirrors/an/AngularASPNETCore2WebApiAuth

本教程将引导您了解并运行一个基于JWT认证的示例项目，该项目结合了Angular（版本5.2.1）前端与ASP.NET Core 2 Web API后端，支持本地用户注册以及Facebook登录。

1. 项目目录结构及介绍

此开源项目遵循典型的.NET Core与Angular应用结构。

AngularASPNETCore2WebApiAuth/
├── src                      # 核心源代码目录
│   ├── AngularClient        # Angular前端项目所在目录
│   │   ├── e2e              # End-to-end 测试相关
│   │   ├── src              # Angular应用的主要源码
│   │   └── ...             # 包含package.json等其他配置文件
│   └── AspNetCoreServer     # ASP.NET Core后端服务
│       ├── Models           # 数据模型定义
│       ├── Controllers      # API控制器
│       ├── appsettings.*.json # 配置文件
│       ├── Startup.cs       # 启动配置类
│       └── ...             # 其他.NET Core相关文件
└── ...

AngularClient: 包含Angular应用程序的所有前端资源。
AspNetCoreServer: 包含ASP.NET Core Web API的服务端实现，包括数据访问、安全配置等。

2. 项目的启动文件介绍

前端启动文件

前端主要通过AngularClient下的main.ts作为启动点，这是Angular应用的入口文件。

后端启动文件

后端的启动逻辑位于AspNetCoreServer目录下的Startup.cs文件中。该文件配置了应用服务、中间件（如JWT认证）、路由设置等关键应用行为。

3. 项目的配置文件介绍

appsettings.json: 包含了应用的基础配置信息，比如数据库连接字符串、JWT密钥等。在不同的环境（如开发、生产）下，可以通过appsettings.Development.json, appsettings.Production.json等文件来覆盖默认设置。
launchSettings.json: 定义了Visual Studio或Visual Studio Code中的调试配置，包括端口分配、环境变量等。

为了运行这个项目，您需要进行以下步骤：

安装依赖：
- 在AngularClient目录下运行npm install来安装前端依赖。
- 在根目录或AspNetCoreServer目录下使用dotnet restore恢复.NET Core依赖。
数据库初始化：使用dotnet ef database update命令在AspNetCoreServer目录下创建数据库表结构。
运行项目：
- 对于前端，可以使用ng serve命令（需先全局安装Angular CLI：npm install -g @angular/cli）。
- 对于后端，执行dotnet run命令在AspNetCoreServer目录。