angular7 - 未捕获( promise ): Error: Invalid CanActivate guard

Question

我是 angular 7 的新手，现在正在尝试实现 CanActive，但我收到错误:

谁能指导我克服这个问题。我的代码示例如下:

auth.guard.ts:

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService,
              private myRoute: Router){
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (this.auth.isLoggednIn()){
      return true;
    } else {
      this.myRoute.navigate(["login"]);
      return false;
    }
  }
}

Answer 1

在 if 中使用 promise 条件总是一个坏主意，因为它没有得到解决。您可以使用 resolve 返回 promise 本身将结果 bool 值进一步向下传递:

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Promise<boolean> | boolean {
   return new Promise(resolve =>
     this.auth.isLoggednIn()
       .then(status: boolean => {
         if(status === false) {
           this.myRoute.navigate(["login"]);
         }
         resolve(status);
       })
       .catch(() => {
         this.myRoute.navigate(["login"]);
         resolve(false);
         // ... or any other way you want to handle such error case
       })
  }
}