Angular2 canActivate () виклику функції асинхронізації

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, як це -> import {Observable} з 'rxjs / Observable';
— Карлос Плієго,

Відповіді:

125

canActivateпотрібно повернути Observableте, що завершує:

@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

— Гюнтер Цехбауер
джерело
Ви можете показати, як використовувати цей клас в інших компонентах?
Не знаю, що ти маєш на увазі. Ви використовуєте це з маршрутами, а не з компонентами. Див. Angular.io/docs/ts/latest/guide/router.html#!#guards
— Günter Zöchbauer
Observable не працює в моєму випадку. Я не бачу жодного виводу на консолі. Однак, якщо я повертаю логічні значення умовно (як у документах), консоль реєструється. Чи є this.auth простим спостережуваним?
— кортопія
@cortopy auth- це значення, яке видає спостережуване (може бути просто trueабо false). Спостережуване виконується, коли маршрутизатор на нього підписаний. Можливо, щось не вистачає у вашій конфігурації.
— Günter Zöchbauer
1
@ günter-zöchbauer так, дякую за це. Я не розумів, що передплачую абонента. Велике спасибі за відповідь! Це чудово працює
— кортопія
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);
      });
    }
  }
}
— KobeLuo
джерело
2
Це насправді хороша відповідь, яка мені справді допомогла. Хоча у мене було подібне запитання, але прийнята відповідь не вирішила мого питання. Цей і зробив
— Костянтин
Власне, це правильна відповідь !!! Хороший спосіб використовувати метод 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 не відповість, а потім перенаправить .. ідеально.
— Філіп Енк
Це виглядає як приклад явного конструктора Promise ( stackoverflow.com/questions/23803743/… ). Приклад коду пропонує getAccessRights () вже повертає Promise, тому я спробував би повернути його безпосередньо за допомогою return this.authService.getAccessRights().then...і повернути логічний результат без загортання resolve.
— rob3c
6

Розширити найбільш популярну відповідь. API Auth для AngularFire2 дещо змінився. Це новий підпис для досягнення AngularFire2 AuthGuard:

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 працює наступний код (пов'язаний з найкращою відповіддю). Зверніть увагу на використання методу "pipe".

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;
        }
      })
    );
  }
}
Розгорніть фрагмент

— Аджітеш
джерело
У мене є ще 1 виклик XHR після isLoggedIn (), і результат XHR використовується у другому виклику XHR. Як мати 2-й дзвінок ajax, який прийме за 1-й результат? Наведений вами приклад досить простий, можете, будь ласка, дайте мені знати, як користуватися картою, якщо у мене теж є інший ajax.
— Pratik
2

У моєму випадку мені потрібно було обробляти різну поведінку, що залежить від помилки стану відповіді. Ось як це працює у мене з RxJS 6+:

@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частина tapоператора . Видаліть його та додайте старий товар, mapяк показано нижче:

  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 також може бути Promise, який перетворюється на логічне значення.

Примітка : Наведений приклад реалізований в Angular 11, але застосовний до версій Angular 2+.

Приклад:

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);
  }
}
Розгорніть фрагмент

— ришабх сеті
джерело
0

використовуючи async await ... ви чекаєте, поки обіцянка вирішиться

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 } } },
— анонімний
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.