은행 응용 프로그램 구축을 통해 Tailwind CSS의 Angular 9-제2과: 로그인 폼 논리 학습

본문은 최초로 https://www.blog.duomly.com/angular-course-building-a-banking-application-with-tailwind-css-lesson-2-login-form/에 발표되었다
며칠 전에 우리는 Angular 과정의 첫 번째 과목을 발표했습니다. 우리는 은행 응용 프로그램의 전단을 구축하고 있습니다. 당신은 SQL injection tutorial에서 볼 수 있습니다.
제1과에서 우리는 Angular CLI 설정 항목을 사용하여 TailwindCSS을 실현하고 로그인 폼에 UI를 만들기 시작했다.
오늘, 나는 우리가 만든 구성 요소를 위한 논리를 더욱 진일보하고 싶다.따라서 이전 부분에서 저와 함께 프로그램을 만들면 코드를 열고 프로그램을 시작합니다.없으면 Angular Course - Lesson 1: Start the project을 보거나 GitHub을 보고 코드를 얻으십시오.
물론 평소와 마찬가지로 강좌를 읽는 것이 아니라 보는 것을 더 좋아한다면 유튜브 채널에서 영상을 준비해 드리겠습니다.
재생 목록에서 본 과정의 첫 번째 과정과 다른 과정을 찾을 수 있습니다. 저희는 이 과정을 준비할 것입니다.
백엔드에서 Golang course에서 찾을 수 있는 응용 프로그램을 사용할 것입니다. 따라서 이것을 만들고 사용할 수도 있습니다.
모서리를 부수자!

1. 로그인 구성 요소에 대한 논리 만들기 - 입력 및 검증 처리

ng serve을 사용하여 기존 프로젝트를 시작하고 login.component.ts 파일을 엽니다.제출 함수와 함께 사용할 수 있도록 함수를 만드는 것부터 시작하고 싶습니다.
우선 두 개의 값username과password를 정의하고 이 값에 빈 문자열을 할당합니다.

username: string = '';
password: string = '';

이제 onKey() 함수를 만듭니다.

onKey(event: any, type: string) {
    if (type === 'username') {
        this.username = event.target.value;
    } else if (type === 'password') {
        this.password = event.target.value;
    }
}

이제 SQL 주입을 방지하기 위해 사용자 이름 필드에 대한 인증을 만들어야 합니다.내 친구는 입력한 프로그램에 SQL 명령을 넣는 방법을 보여 주었다. 사용자 이름이 알파벳과 숫자가 다르면 사용자 이름을 보내는 것을 허락하지 않기를 바란다.isUsernameValid: boolean = true; 아래에 또 다른 password: string = '';을 만듭니다.

isUsernameValid: boolean = true;

이제 validateUsername () 함수를 만듭니다.

validateUsername(): void {
    const pattern = RegExp(/^[\w-.]*$/);
    if (pattern.test(this.username)) {
        this.isUsernameValid = true;    
    } else {
        this.isUsernameValid = false;
    }
}

작업을 하기 위해서 우리는 이 함수를 onKey() 함수에 두었다.

onKey(event: any, type: string) {
    if (type === ‚username’) {
        this.username = event.target.value;
        this.validateUsername();
    } else if (type === ‚password’) {
        this.password = event.target.value;
    }
}

이 단계의 마지막 점은 템플릿에서 onKey 함수를 실현하는 것입니다. 사용자 이름이 잘못되면 오류 메시지를 표시합니다.login.component.html을 열고 입력을 찾습니다.

<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <img class="logo" src="../../assets/logo.png" />
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
      Username
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username" (keyup)="onKey($event, 'username')" required>
    <p *ngIf="!isUsernameValid" class="text-red-500 text-xs italic">Your username can consist of letters and numbers only!</p>
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
      Password
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************" (keyup)="onKey($event, 'password')" required minlength="6">
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" (click)="onSubmit()">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
      Forgot Password?
    </a>
  </div>
</form>

다행이네요. 이제 서비스를 만들고 API 호출을 할 수 있습니다!

2. Angular에서 서비스를 만드는 방법은 무엇입니까?

Angular CLI를 사용하여 login.service.ts을 생성합니다.이를 위해서는 다음 명령이 필요합니다.ng generate service services/login/login필요한 가방을 가져오는 것부터 시작하는 서비스를 시작합니다.

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

이제 API 요청의 일부분이 될 http Options라는 상수를 정의합니다.

const httpOptions = {
  headers: new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
  })
};

다음 단계는 URL을 정의하고 HttpClient을 구조 함수에 전달하는 것입니다.

  url: any = <your_api_url>;

  constructor(
    private http: HttpClient,
  ) { }

다행이네요. 이제 로그인 기능을 만들 수 있어요.함수 내부에서 우리는 응답을 처리해야 한다.만약 우리가 영패를 얻게 된다면, 이것은 사용자가 이미 로그인했다는 것을 의미한다.우리는 사용자가 세션 기간에만 로그인할 수 있도록 이 데이터를 세션 메모리에 저장할 것이다.

login(Username: string, Password: string): any {
    this.http.post(this.url, { Username, Password }, httpOptions).toPromise().then((res: any) => {
      if (res && res.jwt) {
        sessionStorage.setItem('jwt', res.jwt);
      }
    });
  }

또한 로그인 호출이 오류 메시지를 되돌려줍니다. 오류 메시지를 처리해야 합니다.이를 위해 우리는 behaviourSubject의 rxjs을 사용할 것이다.그것을 실시합시다!

errorSubject: any = new BehaviorSubject<any>(null);
errorMessage: any = this.errorSubject.asObservable();

...

login(Username: string, Password: string): any {
    this.http.post(this.url, { Username, Password }, httpOptions).toPromise().then((res: any) => {
      if (res && res.jwt) {
        sessionStorage.setItem('jwt', res.jwt);
        this.errorSubject.next(null);
      } else if (res.Message) {
        this.errorSubject.next(res.Message);
      }
    });
  }

Router에서 @angular/router을 가져와 대시보드 보기에 로그인한 후 사용자로 다시 지정합니다.

import { Router } from '@angular/router';
...
constructor(
  private http: HttpClient,
  private router: Router,
) { }

...
login(Username: string, Password: string): any {
  this.http.post(this.ulr, { Username, Password }, httpOptions).toPromise().then((res: any) => {
    if (res && res.jwt) {
      sessionStorage.setItem('jwt', res.jwt);
      this.errorSubject.next(null);
      this.router.navigateByUrl('dashboard');
    } else if (res.Message) {
      this.errorSubject.next(res.Message);
    }
  });
}

함께 작업하기 전에 HttpClientModule을 app.module.ts 파일에 추가하는 것을 잊어서는 안 됩니다.그러면 코드가 아래 코드와 유사한지 확인하기 위해 열어 보겠습니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

알겠습니다. 이제 login.component.ts 파일로 돌아가서 Login Service를 사용하여 onSubmit() 함수를 만들 수 있습니다.물론, 우리는 서비스를 가져오고 구조 함수에서 설정해야 한다.

import { LoginService } from './../services/login/login.service';

...

constructor(
  private loginService: LoginService,
) { }

onSubmit() {
  if (this.isUsernameValid) {
    this.loginService
    .login(this.username, this.password);
  }
}

다음에 우리가 여기에 추가하고자 하는 것은 오류 값입니다. 만약 오류가 발생하지 않았다면, 우리는 그 중에서 정탐할 것입니다.우리는 ngOnInit() 메서드에서 Login Service의 오류 메시지를 구독할 것입니다.

  error: any = null;
...

  ngOnInit(): void {
    this.loginService
      .errorMessage
      .subscribe(errorMessage => {
        this.error = errorMessage;
      });
  }

거의 다 왔습니다. login.component.html 파일로 전환하고 템플릿에 값을 추가하기만 하면 됩니다.
우선 로그인 단추에 onSubmit() 함수를 할당합니다.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button" (click)="onSubmit()">
  Sign In
</button>

다음은 notification 요소에 부족한 값을 채웁니다.또한 원소가 언제 볼 수 있는지 정의합시다.

<div *ngIf="error" class="notification bg-indigo-900 text-center py-4 lg:px-4">
    <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
      <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">ERROR</span>
      <span class="font-semibold mr-2 text-left flex-auto">{{error}}</span>
    </div>
</div>

봐봐.로그인이 거의 정상입니다!로그인하지 않은 사용자가 응용 프로그램에 들어가는 것을 방지하기 위해 예방 조치를 취할 때가 되었다.

3. 각도 경로설정에서 보호는 어떻게 생성합니까?

따라서 우선 Angular CLI를 사용하여 보호 파일을 생성합니다.ng generate guard services/guards/auth-guard이제 login.service.ts 파일을 살펴보겠습니다. 함수 isAuthenticated()을 다시 만들 것입니다.

  isAuthenticated() {
    if (sessionStorage.getItem('jwt')) {
      return true;
    } else {
      return false;
    }
  }

알겠습니다. auth-guard.service.ts 파일로 전환할 수 있습니다.먼저 Login Service, Router 및 CanActivate를 가져옵니다.

import { Router, CanActivate } from '@angular/router';
import { LoginService } from './login/login.service';

다음은 구조 함수에서 Login Service와 Router를 설정한 다음 canActivate () 함수를 만들 수 있습니다. 사용자가 인증을 거치지 않으면true를 되돌려주고, 사용자가 인증을 거치지 않으면dashboard 구성 요소로 되돌려주고false를 되돌려줍니다.

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(
    public login: LoginService,
    public router: Router) { }

  canActivate(): boolean {
    if (!this.login.isAuthenticated()) {
      this.router.navigateByUrl('/');
      return false;
    }
    return true;
  }
}

4. 대시보드 어셈블리 생성하기

Angular CLI를 사용하여 대시보드 구성 요소를 생성합니다.ng generate component dashboard이제 dashboard.component.ts 파일을 열어 간단한 제목을 만들 것입니다.

<div id="dashboard-component" class="container mx-auto grid">
  <div class="flex mb-4 mt-24">
    <div class="mx-auto">
      <h3 class="text-gray-700 font-normal mx-auto">
        Hi User,here is your dashboard:
      </h3>
    </div>
  </div>
</div>

또한 대시보드에 사용자 정의 스타일을 추가합니다.구성 부분scss 파일.

#dashboard-component {
  h3 {
    font-size: 24px;
  }
}

마지막으로 대시보드 어셈블리에 라우팅을 추가합니다.app-routing.module.ts 파일을 열고 새 라우팅을 만듭니다.
이 경로에서는 AuthGuard를 사용하기 때문에 가져와야 합니다.

import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuardService as AuthGuard } from './services/auth-guard.service';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
];

이제 테스트할 때가 됐어!

결론

나는 당신이 1과와 2과를 위해 코드를 만들 수 있기를 희망하며, 당신은 이미 우리의 응용 프로그램에 로그인을 실행했습니다.
Golang 과정을 보세요. 그곳에서 이 프로그램을 위해 백엔드를 구축할 수 있습니다. 그러면 완전히 실행되는 프로젝트가 생길 것입니다.백엔드가 없으면 데이터를 쉽게 시뮬레이션할 수 있습니다.
다음 과정에서 우리는 사용자 데이터를 계기판에 표시하고 다른 재미있는 기능을 만들 것이다.
만약 당신이 이 과정을 좋아한다면, 계속 관심을 가지고 평론에서 우리에게 알려주세요!
코드에서 길을 잃으면 GitHub 저장소가 있습니다. 이 저장소에는 제2과가 포함되어 있기 때문에 코드를 비교하고 오류를 찾을 수 있습니다.
Angular Course - Lesson Two - Github Code
읽어주셔서 감사합니다.
둘리의 안나.