TypeScript、Angular、Angular2-Routing を使った非同期認証
Angular2 canActivate() 関数で非同期関数を呼び出す方法
Angular2 の canActivate() 関数は、ルートガードやコンポーネントガードとして使用され、ユーザーが特定のルートやコンポーネントにアクセスできるかどうかを制御します。従来、canActivate() 関数は同期的に実行されていましたが、Angular2 では非同期関数を呼び出すことも可能です。これは、認証やデータフェッチなどの非同期操作が必要な場合に役立ちます。
非同期 canActivate() 関数の利点
- エラー処理を容易にすることができます。
- コードをより簡潔で読みやすくすることができます。
- 認証やデータフェッチなどの非同期操作を処理することができます。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return this.authService.isAuthenticated()
.then((isAuthenticated) => {
if (isAuthenticated) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
});
}
}
この例では、AuthGuard サービスは canActivate() 関数を持っています。この関数は AuthService サービスの isAuthenticated() メソッドを呼び出し、ユーザーが認証されているかどうかを確認します。isAuthenticated() メソッドは非同期なので、canActivate() 関数は Promise を返します。
Promise が解決されると、ユーザーが認証されている場合は true、そうでない場合は false が返されます。ユーザーが認証されていない場合は、router.navigate() メソッドを使用してログインページにリダイレクトされます。
Angular2-Routing で非同期 canActivate() 関数を使用する
AuthGuardのようなcanActivate()関数を持つサービスを作成します。- サービスを
providers配列に登録します。 canActivateプロパティを使用して、ルート構成でサービスを指定します。
例
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'protected-route',
canActivate: [AuthGuard],
component: ProtectedComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
providers: [AuthGuard]
})
export class AppModule {}
この例では、protected-route ルートには AuthGuard サービスが指定されています。このサービスは、ユーザーが認証されているかどうかを確認し、認証されていない場合はログインページにリダイレクトします。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return this.authService.isAuthenticated()
.then((isAuthenticated) => {
if (isAuthenticated) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
});
}
}
AuthService
import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
isAuthenticated(): Promise<boolean> {
// 認証ロジックをここに記述
return Promise.resolve(true); // テスト用に認証済みとしておく
}
}
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProtectedComponent } from './protected.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', redirectTo: '/protected-route', pathMatch: 'full' },
{ path: 'protected-route', component: ProtectedComponent, canActivate: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
protected.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-protected',
template: `
<h1>保護されたコンポーネント</h1>
`
})
export class ProtectedComponent {}
説明
AuthGuardサービスは、canActivate()関数を持つ@Injectableサービスです。この関数はAuthServiceサービスのisAuthenticated()メソッドを呼び出し、ユーザーが認証されているかどうかを確認します。AuthServiceサービスは、認証ロジックを処理するisAuthenticated()メソッドを持つ@Injectableサービスです。このメソッドは非同期なので、Promiseを返します。app.routing.module.tsファイルは、AuthGuardサービスをcanActivateプロパティを使用してprotected-routeルートに指定します。protected.component.tsファイルは、保護されたコンポーネントのコードを示します。
RxJS は、非同期処理を処理するための ReactiveX ライブラリです。RxJS を使用すると、canActivate() 関数から Observable を返して、非同期処理の結果を処理することができます。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.authService.isAuthenticated()
.pipe(
map((isAuthenticated) => {
if (isAuthenticated) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}),
tap(() => console.log('認証済み'))
);
}
}
この例では、canActivate() 関数は Observable を返します。この Observable は、map オペレーターを使用して認証結果を true または false に変換し、tap オペレーターを使用してコンソールにログを出力します。
ngrx/store を使用する
ngrx/store は、状態管理のための Redux ライブラリです。ngrx/store を使用すると、canActivate() 関数から Action を発行して、非同期処理の結果をストアに保存することができます。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Store } from '@ngrx/store';
import { from, of } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { isAuthenticated } from './auth.selectors';
import { AuthActions } from './auth.actions';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private store: Store,
private authService: AuthService,
private router: Router
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
return this.store.pipe(
select(isAuthenticated),
switchMap((isAuthenticated) => {
if (isAuthenticated) {
return of(true);
} else {
return from(this.authService.isAuthenticated())
.pipe(
map((isAuthenticated) => {
if (isAuthenticated) {
this.store.dispatch(AuthActions.login());
return true;
} else {
this.router.navigate(['/login']);
return false;
}
})
);
}
})
);
}
}
この例では、canActivate() 関数はストアから isAuthenticated セレクターを購読し、ユーザーが認証されているかどうかを確認します。ユーザーが認証されていない場合は、authService.isAuthenticated() メソッドを呼び出して認証を行います。認証に成功した場合は、ストアにログインアクションをディスパッチし、true を返します。認証に失敗した場合は、ログインページにリダイレクトします。
Angular2 canActivate() 関数で非同期関数を呼び出すには、様々な方法があります。それぞれの方法には長所と短所があるので、状況に合わせて最適な方法を選択する必要があります。
- ngrx/store
状態管理と非同期処理を統合することができますが、ngrx/store の知識が必要となります。 - RxJS
非同期処理をより柔軟に処理することができますが、コードが複雑になる場合があります。 - Promise
シンプルで分かりやすい方法ですが、エラー処理が複雑になる場合があります。
typescript angular angular2-routing
