ユーザー認証の方法[Angular]

ユーザー認証の方法[Angular]
実装方法
まとめ

ユーザー認証の方法[Angular]

Angularでユーザー認証を行う場合、どのようにコードを書けばよいか調べたので、備忘録として残します。
Angularのバージョンは18です。

実装方法

概要

サービスやファイルの概要を説明します。

AuthService：ログイン処理やログインユーザー情報保持、認証済みかどうか判定などの処理を行う
auth.guard.ts：AuthServiceを利用して、CanActivateFnによるアクセス制限の処理を行う
app.routes.ts：アクセス制限をかけるurlパスを指定する

AuthService

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, throwError } from 'rxjs';
import { User } from '../user.model';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private user: User|null
  private isLogged: boolean

  constructor(private httpClient: HttpClient) {
    this.user = null;
    this.isLogged = false;
  }

  getUser(): User | null{
    return this.user
  }

  login(userId: string, password: string){
    this.httpClient.post<User>("http://~urlのログイン処理のAPI~", "userId等のパラメータ設定")
      .pipe(catchError((e) => {
        //　ログインエラーの場合、エラーメッセージ等表示するなどの処理を記載
        return throwError(() => e);}
      ))
      .subscribe((user) => {
        // ログインに成功したときの処理を記載
        // ユーザー情報を保持させたり、アクセストークンを保持させたりなど、認証の仕方によって処理を記載する
        this.user = user;
        this.isLogged = true;
      })
  }

  isAuthenticated(): boolean {
    // 認証済みかどうかをチェックする処理を記載。認証済みの判定は認証方式によってことなる。
    return this.isLogged
  }
}

フィールドの説明

user
- interface等で、ユーザー情報の型を設定したフィールド。ログインユーザーの情報を入れる。

メソッドの説明

getUser()
- 別のコンポーネントなどから、ログインユーザーの情報を取得するメソッド。
login(userId: string, password: string)
- ログイン処理などを行う
- ユーザーが入力したユーザーIDとパスワードの情報を、認証サーバーにAPIで投げて、認証処理をする。
- 認証成功した場合は、ユーザー情報を保持させたり、認証済みであることの情報を持たせたり、アクセストークン方式ならトークンを保持させたりする
isAuthenticated()
- 認証済みかどうかを返す

auth.guard.ts

import { inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
  const authService = inject(AuthService);

  if(authService.isAuthenticated()){
    // 認証済みの場合は、アクセス許可
    return true;
  }

  // 認証してない場合は、アクセス拒否してログイン画面に戻す。
  inject(Router).navigate(["/login"]);
  return false;
};

CanActivateFnは、Angularで使われるアクセス制限の関数になります。
trueを返すと許可、falseを返すと拒否になります。Observableのような値も可能です。

AuthServiceを使って、認証済みの場合、アクセス許可し、
そうでない場合は、ログイン画面にリダイレクトさせてます。

app.routes.ts

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { TopComponent } from './top/top.component';
import { authGuard } from './auth.guard';

export const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'top', component: TopComponent, canActivate: [authGuard]}
];

重要なところは、canActivateの箇所です。アクセス制御をいれたいURLパスに、この設定を追加します。