More than 5 years have passed since last update.

Ionic + Firebase カレンダーアプリその7 ログインチェック

Last updated at 2019-11-20Posted at 2019-11-16

完成イメージ

こんな感じ。 pic.twitter.com/CvOFjFq2th
— げんげんと (@gento34165638) November 2, 2019

はじめに

環境は以下の通り
・ionic4
・Nativeとの橋渡しにはcapacitorを使用
・カレンダーについてはionic2-calendarというライブラリーを使用

前回の記事は[こちら]
その5 ユーザー作成と認証
 その６ログアウト処理とサイドバー

概要

前回と前々回からログイン等の認証関係の実装をやってきた。
だが、ログインしている人以外がアクセスできると厄介なので、ログインしていないユーザーを強制的にログイン画面にリダイレクトさせたい。

今回はログインチェックを実装したい。

AngularのGuardを作成

ionic g guard auth/auth

Guardというのはざっくり言うと、ログインしていない人はアクセスできないようにする機能だ。

これでauthフォルダの中身はこうなった。

auth.guard.ts

import { AuthService } from './auth.service';
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map, take, tap } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/auth';

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.user$.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        if (!loggedIn) {
          console.log('ログインしていない');
          this.router.navigateByUrl('/auth');
        }
      })
    );
  }
}

このGuardを適応させるページをapp-outing.module.tsで設定

app-routing.module.ts

import { AuthGuard } from './auth/auth.guard';
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: './home/home.module#HomePageModule',
    canActivate: [AuthGuard] // これがあるページはログインしていないとアクセスできない
  },
  { path: 'day', loadChildren: './day/day.module#DayPageModule' },
  { path: 'day/:id', loadChildren: './day/day.module#DayPageModule' },
  { path: 'auth', loadChildren: './auth/auth.module#AuthPageModule' },
  { path: 'signup', loadChildren: './signup/signup.module#SignupPageModule' },
];

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