在 auth guard 中混合可观察的 promise答案

【问题标题】：mixing of promise in observable within auth guard在 auth guard 中混合可观察的 promise
【发布时间】：2020-01-25 03:52:54
【问题描述】：

我正在尝试在一个可观察对象内的 promise(gameid) 中返回真或假，如果用户登录或未登录，该可观察对象返回我：

这里是我的 authguard：

//Angular
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
//Rxjs
import { Observable } from 'rxjs';
import { map, take, mergeMap } from 'rxjs/operators';
//Services
import { LoginService } from '../services/login.service';

@Injectable()
export class AuthGuard implements CanActivate{

  constructor(
    public router: Router,
    public loginService: LoginService
  ){}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.loginService.getAuthenticated().pipe(map(user => {
      if(user && user.hasOwnProperty('uid') && user.uid != "" ) {
        this.loginService.getGameIdUser().then( game => {
          if(game.hasOwnProperty["gameid"] && game.gameid != "") {
            return true; // <-- this return is reached but doesnt effect my route
          } else {
            this.router.navigate(['selgame']);
            return false;
          }
        })
      } else {
        this.router.navigate(['login']);
        return false;
      }
    }))
  }
}

似乎返回 true 不会影响 authguard.. 我的错误在哪里？

【问题讨论】：

这是因为当你运行promise时，代码会继续并完成你的canActivate()，promise会稍后运行。

标签： angular typescript ionic-framework

【解决方案1】：

试试这样的。你会把你的承诺变成一个可观察的。

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(
        public router: Router,
        public loginService: LoginService
    ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.loginService.getAuthenticated().pipe(concatMap((user) => {
            if (user && user.hasOwnProperty("uid") && user.uid != "") {
                return from(this.loginService.getGameIdUser()).pipe( // <-- Turn your promise to an observable
                    map((game) => {
                        if (game.hasOwnProperty.gameid && game.gameid != "") {
                            return true; // <-- this return is reached but doesnt effect my route
                        } else {
                            this.router.navigate(["selgame"]);
                            return false;
                        }
                    }),
                );
            } else {
                this.router.navigate(["login"]);
                return of(false);
            }
        }));
    }
}

https://www.learnrxjs.io/learn-rxjs/operators/transformation/concatmap

https://www.learnrxjs.io/learn-rxjs/operators/creation/from

【讨论】：

感谢您的回答，但现在它说 Observable 类型无法与 Observable 匹配
很抱歉。我更新了我的答案。由于我们使用的是 concatMap，我必须在 else 部分返回一个 observable，而不仅仅是 false。
嗯抱歉还是一样...我试图自己修复它但我想我还是不明白:(
啊好吧，缺少的部分是我正在使用 rxjs6，我不得不将其更改为 return observableOf(false);