angular-13-login-registration-example

Angular 13 登录和注册：JWT 与 Web API 示例

使用 Web API 和 JWT 构建基于 Token 的 Angular 13 身份验证与授权应用（包括 HttpInterceptor、Router 和表单验证）。

• 用户注册（Signup）和登录的 JWT 身份验证流程
• 使用 HttpInterceptor、Router 的项目结构
• 如何实现 HttpInterceptor
• 创建带表单验证的登录和注册组件
• 用于访问受保护资源的 Angular 组件
• 如何为 Angular 应用添加动态导航栏
• 使用浏览器会话存储

用户注册和登录流程

对于使用 Web API 的基于 Token 的 JWT 身份验证，我们将调用 2 个端点：

• 用户注册：POST api/auth/signup
• 用户登录：POST api/auth/signin

你可以查看以下流程，了解 Angular 13 JWT 身份验证与授权客户端将发送或接收的请求和响应。

带 Router 和 HttpInterceptor 的 Angular JWT 应用图示

如需了解更多详情，请访问教程：

使用 JWT 和 Web API 的 Angular 登录与注册示例

搭配 Spring Boot 后端

Angular + Spring Boot：JWT 身份验证与授权示例

搭配 Node.js Express 后端

Angular + Node.js Express：JWT 身份验证与授权示例

根据你选择的后端，需要打开 app/_helpers/auth.interceptor.js，并按如下方式修改代码：

...

// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
const TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  ...

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    ...
    if (token != null) {
      // for Spring Boot back-end
      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });

      // for Node.js Express back-end
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
    }
    return next.handle(authReq);
  }
}

...

运行 ng serve --port 8081 启动开发服务器。访问 http://localhost:8081/。

更多练习

Angular JWT 刷新令牌示例（使用 Http 拦截器）

Angular CRUD 应用示例（使用 Web API）

Angular 分页示例 | ngx-pagination

Angular 文件上传示例（带进度条）

使用 Node 构建全栈应用：

Angular + Node Express + MySQL 示例

Angular + Node Express + PostgreSQL 示例

Angular + Node Express + MongoDB 示例

Angular + Node Express：文件上传示例

使用 Spring Boot 构建全栈应用：

Angular + Spring Boot + H2 嵌入式数据库示例

Angular + Spring Boot + MySQL 示例

Angular + Spring Boot + PostgreSQL 示例

Angular + Spring Boot + MongoDB 示例

Angular + Spring Boot：文件上传示例

使用 Django 构建全栈应用：

Angular + Django 示例

使用 Firebase 构建无服务器应用：

Angular Firebase 实时数据库 CRUD 示例 | AngularFireDatabase

Angular Firestore CRUD 示例（使用 AngularFireStore）

Angular Firebase Storage：文件上传/显示/删除示例

集成（在同一服务器/端口上运行后端和前端）

如何将 Angular 与 Node Restful Services 集成

如何将 Angular 与 Spring Boot Rest API 集成