やりたいこと
- ログイン(認証)を突破していないアカウントが、ログイン・アカウント登録画面以外にアクセスできないようにしたい
- 現状だとURL(
/home)を入力すると認証されていないユーザーでもホーム画面にアクセスできてしまう
- ログインしている状態のアカウントがログイン・アカウント登録画面にアクセスできないようにしたい
前提
下記の対応についてはすでに完了しているものとします（対応内容の詳細については過去記事をご参照ください）
- Angular CLIによるAngularプロジェクトの作成
- メールアドレスとパスワードを用いたFirebase認証
- ログアウト機能の実装
- ログイン・ホーム画面などの作成
Guardを作成する
Angular CLIでプロジェクトを作成している場合は、下記のコマンドでauthentication.guard.tsファイルが作成されます。
$ ng g guard authentication
CLIで作成された初期状態のauthentication.guard.tsです。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthenticationGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return true;
}
}
canActivateメソッドでは、Guardを設定したURLに対してのアクセスを許可する場合はtrueを、アクセスを許可しない場合はfalseを返すようにします。
ログインしてないアカウントをホーム画面に入れない
空になっているcanActivateメソッドに、ログインしていないアカウントをホーム画面に遷移させない処理を書いていきます。
import { Injectable } from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree,
Router
} from '@angular/router';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { take, map } from 'rxjs/operators';
@classAuthenticationGuard
@Injectable({
providedIn: 'root'
})
export class AuthenticationGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
):
| Observable<boolean | UrlTree>
| Promise<boolean | UrlTree>
| boolean
| UrlTree {
return this.afAuth.user.pipe(
take(1),
map(user => {
if (user != null) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
})
);
}
}
AngularFireAuth.userはObservable<User|null>を返すため、userがnullならばログインしていない、userが設定されていればログインしている、といった判定をすることができます。
作成したAuthenticationGuardをAppRoutingModuleに設定するとGuardの実装が完了です。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { AuthenticationGuard } from './authentication.guard';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
path: 'home',
component: HomeComponent,
canActivate: [AuthenticationGuard]
},
{ path: 'sign-up', component: SignUpComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
ログイン済みのアカウントをログイン画面に入れない
AuthenticationGuardでやったことの逆をやります。まず、Angular CLIでGuardファイルを作成します。
ng g guard authenticated
作成されたauthenticated.guard.tsファイルを使って、ログイン済みのアカウントがログイン・アカウント登録画面に遷移するのを禁止する処理を実装します。
import { Injectable } from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree,
Router
} from '@angular/router';
import { Observable } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';
import { take, map } from 'rxjs/operators';
@classAuthenticatedGuard
@Injectable({
providedIn: 'root'
})
export class AuthenticatedGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
):
| Observable<boolean | UrlTree>
| Promise<boolean | UrlTree>
| boolean
| UrlTree {
return this.afAuth.user.pipe(
take(1),
map(user => {
if (user != null) {
this.router.navigate(['/home']);
return false;
} else {
return true;
}
})
);
}
}
今度はuserがnullの場合に、Observable型のtrueを返して画面への遷移を許可しています。反面、userがnullでないログイン済のアカウントの遷移は許可せずにホーム画面に遷移させています。
作成したAuthenticatedGuardをloginとsign-upのルーティングに設定すると、認証済のアカウントによるログイン・アカウント登録画面への遷移を禁止することができます。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { AuthenticationGuard } from './authentication.guard';
import { AuthenticatedGuard } from './authenticated.guard';
const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{
path: 'login',
component: LoginComponent,
canActivate: [AuthenticatedGuard]
},
{
path: 'home',
component: HomeComponent,
canActivate: [AuthenticationGuard]
},
{
path: 'sign-up',
component: SignUpComponent,
canActivate: [AuthenticatedGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
動作確認
当初の仕様通りにアクセスをブロックできているか確認します。
未ログインのアカウントをホーム画面に遷移させない
ログインしていない状態から、不正にURLを書き換えて、ホーム画面に遷移しようとします。
URLを`login`から`home`に変える
ホーム画面に遷移せずに、ログイン画面に戻されました。成功です。
ホーム画面に遷移せずにログイン画面に戻る
ログイン済のアカウントをログイン画面に遷移させない
今度はログイン済のアカウントを使って、ホーム画面からログイン画面への遷移を試みます。
URLを`home`から`login`に変える
URLをloginに書き換えて不正アクセスを試みますが、失敗します。こちらも成功です。
ガードされてホーム画面に戻る
バージョン情報
- Angular v7.2.0
- firebase: v6.3.4
- Angular Material v7.3.7
参考サイト
angularfire/getting-started.md at master · angular/angularfire · GitHub
