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

#完成イメージ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こんな感じ。 <a href="https://t.co/CvOFjFq2th">pic.twitter.com/CvOFjFq2th</a></p>&mdash; げん げんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1190431795877007362?ref_src=twsrc%5Etfw">November 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#はじめに
環境は以下の通り
・ionic4
・Nativeとの橋渡しには[capacitor](https://capacitor.ionicframework.com)を使用
・カレンダーについては[ionic2-calendar](https://github.com/twinssbc/Ionic2-Calendar#readme)というライブラリーを使用

:point_right:前回の記事は[こちら]
[その5 ユーザー作成と認証](https://qiita.com/kokogento/items/90ae35c2c587c69c58de)
[その６ ログアウト処理とサイドバー](https://qiita.com/kokogento/items/cf024c80a9b50aeb91ed)


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

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

#AngularのGuardを作成
```terminal
ionic g guard auth/auth
```

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

これで`authフォルダ`の中身はこうなった。
<img width="194" alt="スクリーンショット 2019-11-16 15.20.19.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/af635274-8b86-c46e-b680-008758cc364b.jpeg">


```typescript: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`で設定

```typescript: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 { }
```






#最後に
続き:point_down:
[その8 ログインユーザーのデータを取得](https://qiita.com/kokogento/items/f4f7475fabfd7258dd2b)

各ストアで配信されてます。
興味があれば使ってみてください。:relieved:

<a href="https://apps.apple.com/jp/app/%E6%80%A7%E6%B4%BB%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/id1484151444?mt=8">Apple Store</a>

[Google Play](https://play.google.com/store/apps/details?id=com.hCalendar.app)