angular 2 - 路由守卫返回 observable<boolean>,理解

标签 angular rxjs angular2-routing observable

我想这可能更像是一个 rxjs 理解主题,但上下文最能说明我对它的需求:)

在它下面是我的 PageGuard 类中的工作代码,它会阻止路由到页面,除非 localStorage 中存在有效的 jwt。

如果 localStorage 中存在 token ,CheckForToken() 只会附加授权 header 。

public isAuthenticated():Observable<boolean>{
    this.checkForToken();
    let isAuth = new Observable<boolean>(observer => {
        this.http.get(`https://testhan-api.selfbits.io/api/v1/user`,{headers: this.headers}).subscribe(res => {
            if (res.status === 200){
                observer.next(true);
                observer.complete();
            }else{
                observer.next(false);
                observer.complete()
            }
        },err => console.log(err));
    });
    return isAuth
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.isAuthenticated()
}

路由路径是这样的

{ 
    path:'dashboard', 
    component:DashboardComponent, 
    canActivate:PageGuard
}

我的问题:到目前为止,我的理解是您需要订阅一个可观察对象,以便执行它,例如

observable.subscribe(res => //do something with res)

但这里我只返回一个 observable,它没有被订阅,但是守卫如何评估它?

感谢您的澄清!

最佳答案

如果你真的想深入了解细节......这里是:-)

关于导航的大部分工作都在 runNavigate 上进行方法。它到达守卫的地方是here ,其中有一个调用 checkGuards 返回 Observable<boolean> .根据它是什么类型的守卫,它将为该类型的守卫调用特定方法,该方法也会返回 Observable<boolean>。 .所有这些“特定方法”都调用一个方法 wrapIntoObservable 传入 guard 方法的结果。如果您查看 wrapIntoObservable source,你会看到它检查 Observable、Promise 或常规值。在任何一种情况下,总是返回一个 Observable。

现在回到调用堆栈,一旦所有守卫 Observable 都合并到一个发出单个 bool 值的 Observable 中,该 observable 就会经历 resolving data for the routes 的过程。 .如果合并后的 guard observable 返回 false,新的 resolve Observable 将返回一个 false 的 Observable。否则它将返回解析数据的 Observable。

在下一步中,解析 Observable 得到 subscribed to with forEach .如果解析的数据是错误的(从守卫转发的错误),那么它将什么都不返回并且路由停止。否则, an ActivatedRoute .从那里继续导航的其余部分。

关于angular 2 - 路由守卫返回 observable<boolean>,理解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39627255/

相关文章:

javascript - index.js 没有做 index.ts 做的事情

rxjs - BehaviorSubject 映射一个 BehaviorSubject

javascript - 无法匹配任何路线。带参数的 Angular2 URL

angular - RouteParams 和查询字符串

javascript - ApplicationRef.isStable 未执行

Angular 2/4 adal-angular4 事件目录对 API 问题进行身份验证

javascript - 在 'partition' 中找不到导出 'rxjs'

html - 从列表中检索到的所选项目的新列表

Angular 2 路由 - 无法匹配 URL 段中的任何路由

javascript - ionic 2 : Google Map Custom Controls Not Working