From 3768a5d02cce77ba263223832e7079e04341cb53 Mon Sep 17 00:00:00 2001
From: AlexBob <5199840@qq.com>
Date: Mon, 8 Jul 2024 18:12:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat(web):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=92=8C?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用`debounceTime`和`distinctUntilChanged`对路由事件进行优化，减少不必要的处理。
- 简化登录组件的表单验证逻辑。
- 在登录服务中添加对登录流程的优化，包括对登录请求的处理。
---
 ng-ui/projects/web/src/app/app.component.ts   |  3 +-
 .../web/src/core/login/login.component.ts     | 43 ++++++++-----------
 .../web/src/core/login/login.service.ts       |  1 -
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/ng-ui/projects/web/src/app/app.component.ts b/ng-ui/projects/web/src/app/app.component.ts
index 982644e8..3aefe1ec 100644
--- a/ng-ui/projects/web/src/app/app.component.ts
+++ b/ng-ui/projects/web/src/app/app.component.ts
@@ -7,6 +7,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { NzBackTopModule } from 'ng-zorro-antd/back-top';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
 import { LoadingService } from '../core/loading.service';
+import { debounceTime, distinctUntilChanged } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -19,7 +20,7 @@ export class AppComponent {
   loadingShow = toSignal(this.loading.progress$, { initialValue: false });
   progressShow = signal(true);
   constructor(private loading: LoadingService, private router: Router) {
-    router.events.subscribe(event => {
+    router.events.pipe(debounceTime(100), distinctUntilChanged()).subscribe(event => {
       if (event instanceof NavigationStart) {
         this.progressShow.set(true);
       }
diff --git a/ng-ui/projects/web/src/core/login/login.component.ts b/ng-ui/projects/web/src/core/login/login.component.ts
index be4c6035..0f6bb2de 100644
--- a/ng-ui/projects/web/src/core/login/login.component.ts
+++ b/ng-ui/projects/web/src/core/login/login.component.ts
@@ -1,10 +1,10 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators,} from '@angular/forms';
-import {Credentials, LoginService} from './login.service';
-import {ActivatedRoute, Router} from '@angular/router';
-import {Subject, takeUntil} from 'rxjs';
-import {NzFormModule} from 'ng-zorro-antd/form';
-import {NgIf} from '@angular/common';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Credentials, LoginService } from './login.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { debounceTime, distinctUntilChanged, Subject, takeUntil } from 'rxjs';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-login',
@@ -29,16 +29,8 @@ export class LoginComponent implements OnInit, OnDestroy {
     private loginSer: LoginService
   ) {
     this.loginForm = this.formBuilder.group({
-      username: new FormControl('', [
-        Validators.required,
-        Validators.minLength(5),
-        Validators.maxLength(64),
-      ]),
-      password: new FormControl('', [
-        Validators.required,
-        Validators.minLength(6),
-        Validators.maxLength(64),
-      ]),
+      username: new FormControl('', [Validators.required, Validators.minLength(5), Validators.maxLength(64)]),
+      password: new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(64)]),
       remember: new FormControl(false),
     });
   }
@@ -68,13 +60,14 @@ export class LoginComponent implements OnInit, OnDestroy {
   }
 
   login(credentials: Credentials) {
-    const login = this.loginSer.login(credentials);
-    const result = login.pipe(takeUntil(this.componentDestroyed$));
-    result.subscribe({
-      next: () => {
-        this.router.navigate(['/home'], {relativeTo: this.route}).then();
-      },
-      error: e => console.log(e),
-    });
+    this.loginSer
+      .login(credentials)
+      .pipe(takeUntil(this.componentDestroyed$), debounceTime(100), distinctUntilChanged())
+      .subscribe({
+        next: () => {
+          this.router.navigate(['/home'], { relativeTo: this.route }).then();
+        },
+        error: e => console.log(e),
+      });
   }
 }
diff --git a/ng-ui/projects/web/src/core/login/login.service.ts b/ng-ui/projects/web/src/core/login/login.service.ts
index 615e2972..bac2245c 100644
--- a/ng-ui/projects/web/src/core/login/login.service.ts
+++ b/ng-ui/projects/web/src/core/login/login.service.ts
@@ -51,7 +51,6 @@ export class LoginService {
   getRememberMe() {
     let creStr = this.storage.get(this.storageKey);
     if (creStr) {
-      console.log(creStr);
       creStr = atob(creStr);
       this.credentials = JSON.parse(creStr);
     }