Question

我有一个检查用户会话的警卫。我正在从一个承诺中创建一个可观察的东西并返回那个可观察的东西。

不幸的是，路由器总是在刷新时将我重定向到主页。我想它与observable有关，因为当我简单导航时，它进入if并返回＆＃39; Observalbe.of（true）＆＃39;，这是有效的。

@Injectable()
export default class SessionGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  public canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.hasSessionChecked) {
      return Observable.of(true).take(1);
    }

    const obs = Observable.fromPromise(this.authService.getSession());
    return obs.map((session) => {
      this.authService.setUserSession(session);
      return true;
    }).take(1);
  }
}

我尝试用＆＃39; return true＆＃39;替换observable。一切都按预期工作。

有什么想法吗？谢谢！

Answer 1

它不起作用，因为canActivate应该返回一个布尔值。

为什么要使用Observable？

Answer 2

首先，canActivate的定义如下：

export interface CanActivate {
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}

所以你应该在函数中添加参数。

第二，如果要返回一个observable并且只返回一个observable，则将返回类型更改为observable。如果你想混合，那么你可以留下多种返回类型。

第三次，删除take（）运算符并重构后卫，如下所示：

@Injectable()
export default class SessionGuard implements CanActivate {

  constructor(private authService: AuthService) {}

  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    if (this.authService.hasSessionChecked) {
      return true;
    }
    const obs = Observable.fromPromise(this.authService.getSession());
    return obs.map(session => {
      this.authService.setUserSession(session);
      return true;
    });
  }
}

Answer 3

正如@trichetriche所建议的那样，我已经用一个承诺替换了observable并返回了它。

现在工作得很好。

return this.authService.getSession().then(
  data => {
    this.authService.setUserSession(data);
    return true;
  },
  err => false,
);

Guard始终重定向到默认路由

3 个答案: