Angular 5 Observable需要等到競爭結束

Question

我需要等到可觀察到的getPermissions（）完成之后再調用checkPermissions（）方法。 但是對於我的一生我無法接受...

我也嘗試過使用異步/等待，但這似乎也不適合我？

我需要獲得我的權限，然后才能檢查它們。 思考？

如果有更好的方法，我會全力以赴。

非常感激。

 import { Injectable } from '@angular/core'; import { Router, CanActivate, ActivatedRouteSnapshot } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class RoleGuardService implements CanActivate { constructor(public auth: AuthService,public router: Router) { } canActivate(route: ActivatedRouteSnapshot): boolean { //This will be passed from the route config, on the data property const expectedRole = route.data.expectedRole; var hasPerm = this.loadAndCheckPermissions(expectedRole); console.log('done! ' + hasPerm); return hasPerm; } loadAndCheckPermissions(expectedRole) { var hasPermission = false; localStorage.clear(); var myPermissions = localStorage.getItem('user-permissions'); if (myPermissions === null) { console.log("PERMISSIONS from Server!"); //You can't wait for an Observable or Promise to complete. //You can only subscribe to it to get notified when it completes or emits an event. this.auth.getPermissions() .subscribe(res => { localStorage.setItem('user-permissions', JSON.stringify(res.body)); //Check permissions now //hasPermission = this.checkPermissions(expectedRole); }); } else { hasPermission = this.checkPermissions(expectedRole); } console.log('loadAndCheckPermissions ' + hasPermission); return hasPermission; } //Check a permission here checkPermissions(expectedRole) { return this.auth.checkPermission(expectedRole); } } 

Answer 1

您可以在canActivate方法中返回一個Observable，如下所示：

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

@Injectable()
export class RoleGuardService implements CanActivate {

  constructor(
    public auth: AuthService,
    public router: Router
  ) { }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

    //This will be passed from the route config, on the data property
    const expectedRole = route.data.expectedRole;

    var hasPerm = this.loadAndCheckPermissions(expectedRole);

    console.log('done! ' + hasPerm);
    return hasPerm;
  }

  loadAndCheckPermissions(expectedRole):  Observable<boolean> {

    var hasPermission: Observable<boolean> = Observable.of(false);

    //clear
    localStorage.clear();

    //getter
    var myPermissions = localStorage.getItem('user-permissions');
    //
    if (myPermissions === null) {

      console.log("PERMISSIONS from Server!");

       hasPermission = this.auth.getPermissions()
        .map(res => {
          localStorage.setItem('user-permissions', JSON.stringify(res.body));
          console.log('return from async');

          // Check permissions RETURNING A BOOLEAN
          return this.checkPermissions(expectedRole);
        });

    }
    else {
      hasPermission = Obsersable.of(this.checkPermissions(expectedRole)); 
    }

   // console.log('loadAndCheckPermissions ' + hasPermission);
    return hasPermission;
  }

  //Check a permission here
  checkPermissions(expectedRole) {
    return this.auth.checkPermission(expectedRole);
  }


}

根據Angular的文檔，路由防護可以返回Observable或Promise，並且路由器將等待Observable解析為true或false。

https://angular.io/guide/router#milestone-5-route-guards