web-dev-qa-db-ja.com

Angular 2 canActivate with promise hiting a remote service

まず、これがこの問題を処理する最善の方法かどうかはわかりませんが、私が探しているのは、ユーザーがログインしているかどうかをチェックする「/」のルートガードです。ログインしている場合は、「/ dashboard」にリダイレクトします。 。リモートサーバーで認証ステータスをチェックしていたために画面が点滅しないように、ルートが読み込まれる前にこれを実行したいと思います。

CanActivateインターフェースを実装していますが、期待どおりに機能していません。それは認証サービスにヒットし、ユーザーを返します。このテストコードによれば、ユーザーをリダイレクトする必要がありますが、代わりにコンソールにユーザーが表示されていますが、リダイレクトは表示されていません。

これがコードです

import { Injectable }               from '@angular/core';
import { Router, CanActivate }      from '@angular/router';

import { Observable }               from 'rxjs/Observable';

import { User }                     from './../../models/user.model';
import { AuthService }              from './auth.service';

@Injectable()
export class HomeAuthGuard implements CanActivate {
  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  canActivate(): Promise<boolean> {
    return new Promise((resolve) => {
      this.authService.getStatus()
        .then(function (user: User) {
          console.log('home auth', user)
          this.router.navigate(['/dashboard']);
          resolve(false);
        })
        .catch(function () {
          resolve(true);
        });
      });
  }
}
angularcanactivate
6
Ramee Mossa

これは、「this」バインディングが原因で発生します。 'this'はコンポーネントクラスインスタンスではないため、ほとんどの場合、コードはconsole.logの後にcatchブロックになります。この問題を解決するには、「太い矢印」を使用してください。お気に入り：

return new Promise((resolve) => {
  this.authService.getStatus()
    .then((user: User) => {
      console.log('home auth', user)
      this.router.navigate(['/dashboard']);
      resolve(false);
    })
    .catch(err => {
      resolve(true);
    });
  })
14
Julia Passynkova