非同期関数を呼び出すAngular2canActivate（）

83

Angular2ルーターガードを使用して、アプリの一部のページへのアクセスを制限しようとしています。Firebase認証を使用しています。ユーザーがFirebaseでログインしているかどうかを確認するには、コールバックを使用.subscribe()してFirebaseAuthオブジェクトを呼び出す必要があります。これはガードのコードです：

import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AngularFireAuth } from "angularfire2/angularfire2";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        this.auth.subscribe((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        });
    }
}

ガードが設定されているページに移動するときauthenticated、またはnot authenticatedコンソールに出力されるとき（Firebaseからの応答を待つために少し遅れて）。ただし、ナビゲーションが完了することはありません。また、ログインしていない場合は、/loginルートにリダイレクトされます。したがって、私が抱えている問題はreturn true、要求されたページがユーザーに表示されないことです。これは、コールバックを使用しているためだと思いますが、それ以外の方法を理解できません。何かご意見は？

typescript  angular  angular2-routing 
— エヴァンソルター
ソース
import Observable like this-> import {Observable} from'rxjs / Observable ';
— Carlos Pliego 2018

回答:

125

canActivateObservable完了するものを返す必要があります：

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private auth: AngularFireAuth, private router: Router) {}

    canActivate(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<boolean>|boolean {
        return this.auth.map((auth) => {
            if (auth) {
                console.log('authenticated');
                return true;
            }
            console.log('not authenticated');
            this.router.navigateByUrl('/login');
            return false;
        }).first(); // this might not be necessary - ensure `first` is imported if you use it
    }
}

そこれreturn行方不明と私は使用map()の代わりにsubscribe()理由subscribe()戻りSubscriptionませんObservable

— GünterZöchbauer
ソース
このクラスを他のコンポーネントで使用する方法を示すことができますか？
よく分からない。これは、コンポーネントではなくルートで使用します。参照してくださいangular.io/docs/ts/latest/guide/router.html#!#guards
— ギュンターZöchbauer
私の場合、Observableは実行されません。コンソール出力が表示されません。ただし、（ドキュメントのように）条件付きでブール値を返すと、コンソールがログに記録されます。this.authは単純なObservableですか？
— cortopy 2016
@cortopyauthは、observableによって発行される値です（ちょうどtrueまたはである可能性がありますfalse）。オブザーバブルは、ルーターがサブスクライブすると実行されます。構成に何かが欠けている可能性があります。
— ギュンターZöchbauer
1
@günter-zöchbauerはい、ありがとうございます。購読者に登録していることに気づきませんでした。答えてくれてありがとう！それは素晴らしい働きをします
— cortopy 2016
27

Observable非同期ロジック部分の処理に使用できます。たとえば、私がテストするコードは次のとおりです。

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { DetailService } from './detail.service';

@Injectable()
export class DetailGuard implements CanActivate {

  constructor(
    private detailService: DetailService
  ) {}

  public canActivate(): boolean|Observable<boolean> {
    if (this.detailService.tempData) {
      return true;
    } else {
      console.log('loading...');
      return new Observable<boolean>((observer) => {
        setTimeout(() => {
          console.log('done!');
          this.detailService.tempData = [1, 2, 3];
          observer.next(true);
          observer.complete();
        }, 1000 * 5);
      });
    }
  }
}
— 神戸羅
ソース
2
それは実際に私を本当に助けた良い答えです。同様の質問がありましたが、受け入れられた回答では問題が解決しませんでした。この1はやった
— コンスタンチン
実際、これは正解です!!! 非同期関数を呼び出すcanActivateメソッドを使用する良い方法。
— ダニーロ
13

約束としてtrue | falseを返すことができます。

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {AuthService} from "../services/authorization.service";

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private authService:AuthService) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  return new Promise((resolve, reject) => {
  this.authService.getAccessRights().then((response) => {
    let result = <any>response;
    let url = state.url.substr(1,state.url.length);
    if(url == 'getDepartment'){
      if(result.getDepartment){
        resolve(true);
      } else {
        this.router.navigate(['login']);
        resolve(false);
      }
    }

     })
   })
  }
}
— 不正な若者
ソース
1
その新しいPromiseオブジェクトは私を救います：Dありがとう。
— canmustu
ありがとうございました。このソリューションは、API呼び出しが応答するまで待機してから、リダイレクトします。完璧です。
— PhilipEnc20年
これは、明示的なPromiseコンストラクターのアンチパターンの例のように見えます（stackoverflow.com/questions/23803743/…）。コード例は、getAccessRights（）がすでにPromiseを返すことを示唆しているので、で直接返して、return this.authService.getAccessRights().then...でラップせずにブール結果を返すようにしresolveます。
— rob3c
6

最も人気のある答えを拡張します。AngularFire2のAuthAPIには多少の変更があります。これは、AngularFire2AuthGuardを実現するための新しい署名です。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(
    private auth: AngularFireAuth,
    private router : Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean>|boolean {
    return this.auth.authState.map(User => {
      return (User) ? true : false;
    });
  }
}

注：これはかなり単純なテストです。ユーザーインスタンスをコンソールログに記録して、ユーザーのより詳細な側面に対してテストするかどうかを確認できます。ただし、少なくとも、ログインしていないユーザーからルートを保護するのに役立つはずです。

— ルディ・ストライダム
ソース
5

AngularFireの最新バージョンでは、次のコードが機能します（ベストアンサーに関連）。「パイプ」方式の使用法に注意してください。

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(private afAuth: AngularFireAuth, private router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.afAuth.authState.pipe(
      map(user => {
        if(user) {
          return true;
        } else {
          this.router.navigate(['/login']);
          return false;
        }
      })
    );
  }
}
スニペットを展開

— Ajitesh
ソース
isLoggedIn（）の後にもう1つのXHR呼び出しがあり、XHRの結果が2番目のXHR呼び出しで使用されます。最初の結果を受け入れる2番目のajax呼び出しを行うにはどうすればよいですか？あなたが与えた例はとても簡単です、私が別のajaxも持っているなら、あなたは私に地図の使い方を教えてもらえますか？
— Pratik
2

私の場合、応答ステータスエラーに応じて異なる動作を処理する必要がありました。これは、RxJS6 +での動作方法です。

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private auth: AngularFireAuth, private router: Router) {}

  public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    return this.auth.pipe(
      tap({
        next: val => {
          if (val) {
            console.log(val, 'authenticated');
            return of(true); // or if you want Observable replace true with of(true)
          }
          console.log(val, 'acces denied!');
          return of(false); // or if you want Observable replace true with of(true)
        },
        error: error => {
          let redirectRoute: string;
          if (error.status === 401) {
            redirectRoute = '/error/401';
            this.router.navigateByUrl(redirectRoute);
          } else if (error.status === 403) {
            redirectRoute = '/error/403';
            this.router.navigateByUrl(redirectRoute);
          }
        },
        complete: () => console.log('completed!')
      })
    );
  }
}

場合によっては、少なくとも演算子のnext一部では、これが機能しないことがあります。それを削除し、以下のように古い商品を追加します。tapmap

  public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    return this.auth.pipe(
      map((auth) => {
        if (auth) {
          console.log('authenticated');
          return true;
        }
        console.log('not authenticated');
        this.router.navigateByUrl('/login');
        return false;
      }),
      tap({
        error: error => {
          let redirectRoute: string;
          if (error.status === 401) {
            redirectRoute = '/error/401';
            this.router.navigateByUrl(redirectRoute);
          } else if (error.status === 403) {
            redirectRoute = '/error/403';
            this.router.navigateByUrl(redirectRoute);
          }
        },
        complete: () => console.log('completed!')
      })
    );
  }
— mpro
ソース
0

別の実装方法を示すため。あたりとして文書化、および他の回答で述べたCanActivateのタイプも解決さがブールすることを約束することができ返します。

注：示されている例はAngular 11で実装されていますが、Angular2 +バージョンに適用できます。

例：

import {
  Injectable
} from '@angular/core';
import {
  ActivatedRouteSnapshot,
  CanActivate,
  CanActivateChild,
  Router,
  RouterStateSnapshot,
  UrlTree
} from '@angular/router';
import {
  Observable
} from 'rxjs/Observable';
import {
  AuthService
} from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot, state: RouterStateSnapshot
  ): Observable < boolean | UrlTree > | Promise < boolean | UrlTree > | boolean | UrlTree {
    return this.checkAuthentication();
  }

  async checkAuthentication(): Promise < boolean > {
    // Implement your authentication in authService
    const isAuthenticate: boolean = await this.authService.isAuthenticated();
    return isAuthenticate;
  }

  canActivateChild(
    childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot
  ): Observable < boolean | UrlTree > | Promise < boolean | UrlTree > | boolean | UrlTree {
    return this.canActivate(childRoute, state);
  }
}
スニペットを展開

— rishabh sethi
ソース
0

asyncawaitを使用しています... promiseが解決するのを待ちます

async getCurrentSemester() {
    let boolReturn: boolean = false
    let semester = await this.semesterService.getCurrentSemester().toPromise();
    try {

      if (semester['statusCode'] == 200) {
        boolReturn = true
      } else {
        this.router.navigate(["/error-page"]);
        boolReturn = false
      }
    }
    catch (error) {
      boolReturn = false
      this.router.navigate(["/error-page"]);
    }
    return boolReturn
  }

これが私の認証ガードです（@angular v7.2）

async canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let security: any = null
    if (next.data) {
      security = next.data.security
    }
    let bool1 = false;
    let bool2 = false;
    let bool3 = true;

    if (this.webService.getCookie('token') != null && this.webService.getCookie('token') != '') {
      bool1 = true
    }
    else {
      this.webService.setSession("currentUrl", state.url.split('?')[0]);
      this.webService.setSession("applicationId", state.root.queryParams['applicationId']);
      this.webService.setSession("token", state.root.queryParams['token']);
      this.router.navigate(["/initializing"]);
      bool1 = false
    }
    bool2 = this.getRolesSecurity(next)
    if (security && security.semester) {
      // ----  watch this peace of code
      bool3 = await this.getCurrentSemester()
    }

    console.log('bool3: ', bool3);

    return bool1 && bool2 && bool3
  }

ルートは

    { path: 'userEvent', component: NpmeUserEvent, canActivate: [AuthGuard], data: {  security: { semester: true } } },
— 匿名
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.