[英]Angular 2 Router - CanActivate Guard
如果他们的会话无效,我正在实施一个 CanActivate 守卫将用户重定向到登录页面。
检查会话是否有效是通过服务完成的,因此我订阅了服务调用以获取会话有效性状态。
我已经调试了代码,一切似乎都正常工作,事实上,当会话无效时,应用程序确实重定向回登录页面。 但是,当我从守卫返回true
时,页面未加载。
我的代码类似于Angular 文档中列出的代码(Plunker上的代码)。
我不确定我是否在警卫本身中实施了错误。 我可以看到的不同之处在于警卫正在访问服务中的属性 - 但我认为这并不重要。 据我所知,从守卫返回true
只会继续正常的路由操作。
注意:我使用的是 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
有关。 作为测试,我尝试了以下操作,一切都按预期进行:
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<boolean>
。 我实现的CheckSessionService
确实返回一个Observable<boolean>
。 事实上,当我尝试下面的代码时,一切都按预期工作,这意味着如果会话有效,则页面加载成功,否则路由将停止:
export class MyGuard implements CanActivate {
constructor(private checkSessionService: CheckSessionService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) {
return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'));
}
}
但是,在上面的示例中,我找不到根据服务检索到的值重定向到特定页面的方法。 我现在的问题是是否有一种方法可以在没有 subscribe 方法的情况下检查this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
的结果,或者有一种不同的方法如何从subscribe
方法返回。 我确实尝试过:
if(this.checkSessionService.checkUserSession(localStorage.getItem('userToken')) === Observable.of(false))
但正如预期的那样,它没有用。
替换
this.checkSessionService...
由
return this.checkSessionService...
除了订阅 observable 并返回订阅之外,您还必须返回 observable 本身,但插入一些东西以防它是假的:
return this.checkSessionService.checkUserSession(localStorage.getItem('userToken'))
.do(function(authenticated) {
if (!authenticated) ...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.