イオンベースの認証ベースルート

我々はユーザーのログインを持っていると我々のユーザーのためのいくつかのデータを格納している次のステップは、ユーザーだけでログインして確認することです我々のアプリの一部を表示することができます.
この例では、タブ2へのアクセスを確保しています.以前は誰でもこのタブを見ることができましたが、ログインしている人だけが見たいと思っています.
ユーザーが認証されていない場合、ログインボタンがあるタブ1にそれらをリダイレクトする必要があります.

Authガードの追加

認証ガードは角度で導入された素晴らしいアイデアです.基本的にはbooleanを返すスクリプトです.
その後、私たちのルートにそれらを追加することができますcanActive コールバック.これはユーザがアクセスできるかどうかをチェックするスクリプトを呼び出します.
まず、オーサガードを生成しましょう.

ionic generate guard services/guards/auth

これはauth.guard.ts ファイルの内部src/services/guards フォルダ.
このような基本的な構造が既に得られています.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  } 
}

ご覧の通り、canActivate 関数は既に作成され、true .
ユーザーのログイン状態に基づいてtrueまたはfalseを返します.
しかし、まず、私たちのルートには、まだ動作をテストするためにこれを追加しましょう.
開放するsrc/tabs/tabs-routing.module.ts ファイルと変更tab2 ルートは次のようになります.

{
    path: 'tab2',
    loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule),
    canActivate: [AuthGuard]
},

このタブに移動する前に、AuthGuard関数がtrueを返すかどうかを確認します.
我々は、2番目のタブを訪問してそれをテストすることができます、我々はまだ我々は常に今trueを返して以来、それを表示することができます.

それはまだそうです、それで、我々のもとに戻りましょうAuthGuard 必要なコードを書く.
我々は、我々の建設者でルータを加えることから始めます.我々がログインしないならば、我々はログインにナビゲートするこのルータを必要とします.

constructor(private router: Router) {}

次に、必要なFirebaseアイテムをインポートしましょう.

import firebase from "firebase/app";
import "firebase/auth";

今、我々は内部の約束を含むcanActivate ユーザオブジェクトの機能とチェック.

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return new Promise<boolean>((resolve) => {
      firebase.auth().onAuthStateChanged((user: firebase.User) => {
        if (!user) {
          this.router.navigate(["/tabs/tab1"]);
        }
        resolve(true);
      });
    });
}

これはユーザオブジェクトの変更が毎回呼び出されます.
我々が現在我々のコードとログアウトを走らせるならば、我々はTab 2にアクセスすることができません.これをクリックするたびに、タブ1にリダイレクトされます.

タブ2をクリックすると、タブ1にリダイレクトされます.
今では最も重要な部分を試してみて、それが我々がログインしている一度働くかどうかチェックしてみよう!

私たちがログインしたら、我々は2番目のタブを訪問することができます.
そして、それは記事を結びます.我々は、ユーザーがログインできるだけで保護されたルートを作る方法を学びました.
今日のコードは次のとおりですGitHub repo .

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or