Angular 2 路由器 - CanActivate Guard [英] Angular 2 Router - CanActivate Guard

问题描述

如果用户的会话无效，我正在实施一个 CanActivate 保护来将用户重定向到登录页面.

I'm implementing a CanActivate guard to redirect the user to the login page if their session is invalid.

检查会话是否有效是通过服务完成的，因此我订阅了服务调用以获取会话有效性状态.

The check as to whether the session is valid or not is done through a service and so from the guard I'm subscribing to the service call to get the session validity state.

我已经调试了代码，一切似乎都在正常工作，事实上，当会话无效时，应用会重定向回登录页面.但是，当我从守卫返回 true 时，页面未加载.

I've debugged the code and everything seems to be working as it should, in fact when the session is invalid the app does redirect back to the login page. However when I return true from the guard, the page is not loaded.

我的代码类似于Angular 文档(Plunker 上的代码).

我不确定我是否在警卫本身中实施了错误.我可以看到的不同之处在于警卫正在访问服务中的属性 - 但我认为这并不重要.据我所知，从守卫返回 true 只会继续正常的路由操作.

I'm not sure whether I've implemented something wrong in the guard itself. The difference that I can see is that the guard is accessing a property in the service - but I don't think that should matter much. From what I can understand returning true from the guard would simply continue the normal routing operation.

注意:我使用的是 Angular RC3

Note: I'm using Angular RC3

代码:

守卫

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
        .subscribe(validSessionReturn => {

            if (validSessionReturn) {
                return true;
            } else {
                // redirect to login
                this.router.navigateByUrl('/login');
                return false;
            }
        },
        error => console.log(error));
    }
}

编辑

我进行了进一步调查，看起来我遇到的问题与我试图从 subscribe 方法本身返回 boolean 的事实有关.作为测试，我尝试了以下操作，一切都按预期进行:

I've investigated further and it looks like the issue I'm having is related to the fact that I'm trying to return the boolean from the subscribe method itself. As a test I've tried the following and everything worked as expected:

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        if(localStorage.getItem('userToken') !== null) {
            return true; // or return Observable.of(true);
        } else {
            return false; // or return Observable.of(false);
        }
    }
}

您可以从上面的代码中注意到，可以返回 boolean 或 Observable.我实现的 CheckSessionService 确实返回了一个 Observable.事实上，当我尝试下面的代码时，一切都按预期工作，这意味着如果会话有效，则页面加载成功，否则路由将停止:

You can notice from the above code that one can return either a boolean or an Observable<boolean>. The CheckSessionService I've implemented does return an Observable<boolean>. In fact when I tried the code below, once again everything worked as expected, meaning that if the session is valid the page is loaded successfully, otherwise routing is stopped:

export class MyGuard implements CanActivate {
    constructor(private checkSessionService: CheckSessionService, private router: Router) {}

    canActivate(
    next:  ActivatedRouteSnapshot,
    state: RouterStateSnapshot
    ) {
        return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'));
    }
}

但是，在上面的示例中，我找不到根据服务检索到的值重定向到特定页面的方法.我现在的问题是是否有一种方法可以在没有订阅方法的情况下检查 this.checkSessionService.checkUserSession(localStorage.getItem('userToken')) 的结果，或者有一种不同的方法如何从订阅 方法.我确实尝试过:

However with the above example I can't find a way to redirect to a specific page based on the value retrieved by the service. My question now is whether there's a way to check the result of this.checkSessionService.checkUserSession(localStorage.getItem('userToken')) without a subscribe method, or there's a different way how to return from the subscribe method. I did try:

if(this.checkSessionService.checkUserSession(localStorage.getItem('userToken')) === Observable.of(false))

但不出所料，它不起作用.

but as expected it did not work.

推荐答案

替换

this.checkSessionService...

由

return this.checkSessionService...

除了订阅 observable 并返回订阅之外，您还必须返回 observable 本身，但插入一些东西以防它是假的:

Instead of subscribing to the observable and return the subscrption, you must also return the observable itself, but plug something in case it's false:

return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
    .do(‌​function(authenticated) { 
        if (!authenticated) ... 
    });

这篇关于Angular 2 路由器 - CanActivate Guard的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！