可以激活守卫并使用带有 angular 5 的 observables

Question

我正在使用实现 canActivate 的路由保护

我在代码中放置了一堆控制台日志以了解它在哪里失败。

如果我导航到受保护的路线，会发生什么。导航失败，因为守卫未能返回值。我的 http 地图没有完成。

我目前有一个 JWT 令牌保存在我的会话存储中，但没有保存在我的本地

这些是我运行守卫时得到的控制台日志

running the local check

running the session check

got session token authorizing it

然后 http 地图回来，然后代码中断。

完整代码如下。帮助将不胜感激！

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';
import {Injectable} from '@angular/core';
import {UserAuthorizationService} from "../userauthorizationservice/userauthorizationservice";


@Injectable()
export class ClientSuitsAdminSuperUserGuard implements CanActivate{
  constructor(private userservice: UserAuthorizationService, private router: Router){}
  user ={
    id: null,
    isclient: false,
    issuitsviewer: false,
    issuitsadministrator: false,
    issuitssuperuser: false,
    isvenueuser: false

  };

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | boolean {

    let token = this.userservice.checklocalfortoken();
    console.log('running the local check');
    if(token == null){
      console.log('running the session check');
      token = this.userservice.checksessionfortoken();
      if(token == null){
        console.log('no session token nav to sign in return false');
        this.router.navigate(['/signin']);
        return false;
      }
      console.log('got session token authorizing it');
      this.userservice.returnauthorizetoken(token)
        .map(
          (req: any)=>{
            this.user = req;
            console.log('this is the user object from the session auth');
            console.log(this.user);
            if(this.user.isclient || this.user.issuitsadministrator || this.user.issuitssuperuser){
              console.log('the user has permissions from the session');
              return true;
            }else{
              console.log('the user does  not have permissions from the session');
              this.router.navigate(['/401']);
              return false;
            }
          },
          error => {
            console.log('error with the session authorization');
            this.router.navigate(['/signin']);
            return false;
          }
        );

    }else{
      console.log('doing the local check');
      this.userservice.returnauthorizetoken(token)
        .map(
          (req: any)=>{
            this.user = req;
            console.log('got the user object from the local');
            console.log(this.user);
            if(this.user.isclient || this.user.issuitsadministrator || this.user.issuitssuperuser){
              console.log('user has permissions from the local');
              return true;
            }else{
              console.log('user does not have permissions from the local');
              this.router.navigate(['/401']);
              return false;
            }
          },
          error => {
            console.log('error from the local authorization');
            this.router.navigate(['/signin']);
            return false;
          }
        );
    }
  }

}

Answer 1

您需要返回一个canActivate发出布尔值的 observable 。在幕后，Angular 订阅返回的 observable，然后根据发出的值正确处理路由。

如果您将调用返回到您的userservice.

更新

@Injectable()
export class ClientSuitsAdminSuperUserGuard implements CanActivate{
  constructor(private userservice: UserAuthorizationService, private router: Router){}
  user ={
    id: null,
    isclient: false,
    issuitsviewer: false,
    issuitsadministrator: false,
    issuitssuperuser: false,
    isvenueuser: false

  };

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): Observable<boolean> | boolean {

    let token = this.userservice.checklocalfortoken();
    if (token == null) {
      token = this.userservice.checksessionfortoken();
      if(token == null){
        this.router.navigate(['/signin']);
        return false;
      }
      return this.userservice.returnauthorizetoken(token)
        .map(
          (req: any)=>{
            this.user = req;
            console.log('this is the user object from the session auth');
            console.log(this.user);
            if(this.user.isclient || this.user.issuitsadministrator || this.user.issuitssuperuser){
              console.log('the user has permissions from the session');
              return true;
            }else{
              console.log('the user does  not have permissions from the session');
              this.router.navigate(['/401']);
              return false;
            }
          },
          error => {
            console.log('error with the session authorization');
            this.router.navigate(['/signin']);
            return false;
          }
        );

    } else {
      console.log('doing the local check');
      return this.userservice.returnauthorizetoken(token)
        .map(
          (req: any)=>{
            this.user = req;
            console.log('got the user object from the local');
            console.log(this.user);
            if(this.user.isclient || this.user.issuitsadministrator || this.user.issuitssuperuser){
              console.log('user has permissions from the local');
              return true;
            }else{
              console.log('user does not have permissions from the local');
              this.router.navigate(['/401']);
              return false;
            }
          },
          error => {
            console.log('error from the local authorization');
            this.router.navigate(['/signin']);
            return false;
          }
        );
    }
  }

}