可以激活 guard 并在其中使用 observables angular 5

Question

我正在使用实现 canActivate

的路由守卫

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

如果我导航到受保护的路线会发生什么。导航失败，因为守卫未能 return 一个值。我手上的http map 还没整理好。

我目前有一个 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(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');
          //subscribe method_first and return boolean  variable from here
        }else{
       //subscribe method_second and return boolean  variable from here
        }
      }



       method_first(token): observable<any>{
       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;
              }
            );
      }

      method_second(token): observable<any>{
      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 2

您需要 return 来自 canActivate 的可观察对象，它会发出一个布尔值。在后台 Angular 订阅了 returned 的可观察对象，然后根据发出的值正确处理路由。

如果您 return 调用您的 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;
          }
        );
    }
  }

}

可以激活 guard 并在其中使用 observables angular 5

can activate guard and using observables with in them angular 5

observable

angular

angular-route-guards

已更新