Question

我想在我的应用中添加一些限制路线。我写了一个Guard，就像他们在这里的文档中解释的那样，但我尝试在没有打字稿的情况下实现它：https://angular.io/docs/ts/latest/guide/router.html#!#guards

My Guard看起来像这样但我不能使用CanActivate，因为它没有在@angular/router v3.1.1中定义

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

console.log(CanActivate); // undefined

export class AuthGuard extends CanActivate {
  constructor(AuthService) {
    super();
    this._authService  = AuthService;
  }

  canActivate() {
      return this.checkIfLoggedIn();
  }

  _checkIfLoggedIn() {
      const user = this._authService.getUser();

      return user;
  }

  static get parameters() {
    return [[AuthService]];
  }
}

任何想法？

修改

这种方法按预期工作，感谢@PierreDuc帮助我回到赛道上。

import { Router } from '@angular/router';
import { AuthService } from './app.auth.service';

export class AuthGuard  {
  constructor(AuthService, Router) {
    this._authService = AuthService;
    this._router = Router;
  }

  canActivate() {
    if (this._authService.isLoggedIn()) {
      return true;
    }

    this._router.navigate(['/login']);
    return false;
  }

  static get parameters() {
    return [[AuthService], [Router]];
  }
}

Answer 1

那是因为它是interface。这仅用于TypeScript中的类型提示和静态类型。它在编译的JavaScript中没有实际输出。因此，它将在逻辑上评估为undefined。

您的代码可能无法正常工作的原因是您使用checkIfLoggedIn并使用_checkIfLoggedIn定义了一项功能（通话中缺少 _ ）。

另一个原因可能是getUser是异步函数。在这种情况下，您应该返回Observable<boolean>或Promise<boolean>

Angular2 CanActivate undefined

1 个答案: