【Angular】ガード処理をルーティングに組みアクセスブロックする方法

2023 9/12

2023年6月27日 2023年9月12日

Angularのガード処理について知りたいなぁ….

この記事では上記の悩みを解決します。

ガード処理について解説した後、実際の実装例をご紹介していきますね。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

Angularのガード処理とは

Angularのガー処理は、ページを表示する前にアクセス権があるかなどの処理を挟むことができます。

例えば、ログイン後に表示されるページにアクセスしようとした時、一度ガード処理を挟んでログイン済みかどうかを判別し未ログインの場合はログインページに遷移させることができます。

URLの直だたきなどを防止できるので、セキュリティ面が向上するでしょう。

実装例①ルートガードの実装例

ルートガードは、ルートへのアクセスを制御するために使用されます。
まず、ルートガードのためのガードクラスを作成します。以下は、認証が必要な場合にアクセスを許可するガードクラスの例です。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      // ログインページにリダイレクトする
      return this.router.parseUrl('/login');
    }
  }
}

ルートの定義時に、作成したガードクラスを使用してルートガードを有効にします。以下は、ルートの定義例です。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

実装例②コンポーネントガードの実装例

コンポーネントガードを使用して、ルートナビゲーションや特定のルートへのアクセスを制御することができます。

CanActivateインターフェースを実装するガードクラスを作成します。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // ここにアクセス制御のロジックを実装します
    if (/* ユーザーが認証済みであるかどうかのチェックなど */) {
      return true; // アクセスを許可
    } else {
      // 認証されていない場合はログインページにリダイレクトします
      this.router.navigate(['/login']);
      return false; // アクセスを拒否
    }
  }
}

ルートの定義で、ガードを使用してアクセス制御を適用します。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './login.component';
import { AuthGuard } from './auth.guard';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

ルートにアクセスしようとした際に呼び出されます。ここでは、ユーザーが認証済みであるかどうかをチェックし、認証されていない場合は /login ページにリダイレクトします。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい