Angular 2 canActivate 承诺命中远程服务答案

【问题标题】：Angular 2 canActivate with a promise hitting a remote serviceAngular 2 canActivate 承诺命中远程服务
【发布时间】：2017-09-13 17:49:08
【问题描述】：

首先，我不确定这是否是处理此问题的最佳方法，但我正在寻找的是“/”上的路由保护，它检查用户是否登录，如果是则将他们重定向到“ /仪表板”。我想在加载路由之前执行此操作，以避免屏幕闪烁，因为正在检查远程服务器上的身份验证状态。

我正在实现 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);
        });
      });
  }
}

【问题讨论】：

您能否添加更多与代码相关的路线以了解您的问题

标签： angular canactivate

【解决方案1】：

这是由于 'this' 绑定而发生的。由于“this”不是您的组件类实例，您的代码很可能会在 console.log 之后被捕获块。使用“胖箭头”来解决这个问题。喜欢：

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);
    });
  })

【讨论】：

是的，做到了。谢谢！