Angular 2可以通过一个承诺命中远程服务来激活

Question

首先,我不确定这是处理这个问题的最佳方法,但我要找的是"/"上的路由保护,它检查用户是否已登录,如果是,则将它们重定向到"/ dashboard" .我想在加载路由之前这样做,以避免屏幕闪烁,因为在远程服务器上检查auth状态.

我正在实现canActivate接口,但它没有按预期工作.它命中auth服务,并返回用户,根据此测试代码应该重定向用户,但我在控制台中看到用户但没有重定向.

这是代码

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

Answer 1

这是因为'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);
    });
  })