Angular での AuthGuard について

Angular の AuthGuard は、特定のルートを保護するために使用されるルートガードであり、認証されてアクセス権がある場合にのみユーザーアクセスを許可します。AuthGuard は、ユーザーが認証を必要とするページに直接アクセスできないようにするために、ルーティング構成でよく使用されます。

AuthGuard は、次のコマンドで作成できる Angular サービスです。

ng g guard auth

上記のコマンドは、「auth」という名前の AuthGuard を生成し、src/app/auth.guard.tsファイル。auth.guard.tsファイル内のコードは次のようになります。

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.isLoggedIn()) {
    
    
      return true;
    } else {
    
    
      this.router.navigate(['/login']);
      return false;
    }
  }
}

上記のコードでは、AuthGuard は CanActivate インターフェイスを実装することによって定義されています。CanActivate インターフェイスには、ユーザーが保護されたルートにアクセスしようとしたときに何が起こるかを決定canActivate()する。

AuthGuard では、and オブジェクトAuthServiceというRouter。AuthServiceユーザーがすでにログインしているかどうかを確認するために使用され、ログインページまたはユーザーがアクセスしようRouterとしていたページに移動するために使用されます。canActivate()メソッドでは、まずthis.authService.isLoggedIn()メソッドを呼び出して、ユーザーがすでにログインしているかどうかを確認します。ユーザーがログインしている場合は、ユーザーがルートにアクセスできることを示す true を返します。それ以外の場合は、this.router.navigate(['/login'])メソッド、ユーザーをログインページにリダイレクトし、ユーザーがこのルートにアクセスできないことを示すために false を返します。

AuthGuard でルートを保護するには、ルート構成のcanActivate属性。例えば：

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

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

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

上記のコードでは、/dashboardルートのcanActivateプロパティに AuthGuard を追加しました。これは、ユーザーがすでにログインしている場合にのみ/dashboardルート。

Angular での AuthGuard について

おすすめ