守卫总是重定向到默认路由

Question

我有一个检查用户会话的守卫。我正在根据承诺创建可观察对象并返回该可观察对象。

不幸的是，路由器总是在刷新时将我重定向到主页。我猜它与可观察对象有关，因为当我简单地导航时，它输入 if 和 returns 'Observalbe.of(true)'，这是有效的。

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

我尝试用 'return true' 替换 observable 并且一切正常。

有什么想法吗？谢谢！

Answer 1

它不起作用，因为 canActivate 应该是 return 布尔值。

为什么要使用 Observable ？

Answer 2

首先，canActivate的定义如下：

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

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

Second，如果你要return一个observable而且只是一个observable，那么把return类型改成just observable。如果你想要混合，那么你可以留下多个 return 类型。

第三，删除 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 所建议的，我已经用一个 promise 替换了 observable 并返回了它。

现在运行良好。

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

守卫总是重定向到默认路由

Guard always redirects to the default route

angular

observable

guard

canactivate