[英]Angular2: AuthGuard not working when using browser navigation buttons
I've got a simple AuthGuard configured, that works perfectly fine when navigating "normally" through the application (see code below). 我已经配置了一个简单的AuthGuard,当在应用程序中“正常”浏览时,它可以很好地工作(请参见下面的代码)。
Now imagine following: 现在想象一下:
User navigates to /content/secured-content
, which requires authentication => he is being redirected to /authentication/login
because of checkLogin
=> he successfully authenticated and is therefore redirected back to /content/secured-content
=> he clicks on the "Logout" button and is successfully logged out ( checkLogin
will now return false). 用户导航到
/content/secured-content
,这需要身份验证=>由于checkLogin
=>他已成功通过身份验证,因此他被重定向到/authentication/login
,因此他被重定向回/content/secured-content
=>他单击单击“注销”按钮并成功注销( checkLogin
现在将返回false)。
Now the important stuff: When the user now navigates back to the secured-content page (browser's "back" button), neither canActivate
nor canActivateChild
nor canLoad
is being called and the router happily displays the secured content. 现在很重要:当用户现在导航回到安全内容页面(浏览器的“后退”按钮)时,
canActivate
或canActivateChild
或canLoad
都不会被调用,路由器会愉快地显示安全内容。 Secured content itself relies on a session which is destoryed at the logout, so it's still secured, but I want that the user is redirected to the /authentication/login
page again and expected that behavior to be honest. 受保护的内容本身依赖于注销时被破坏的会话,因此它仍然是受保护的,但是我希望用户再次重定向到
/authentication/login
页面,并希望这种行为是诚实的。
Can you tell me where I made the error in reasoning and if there is a proper solution to my problem? 您能告诉我我在推理中哪里出错了,以及我的问题是否有适当的解决方案?
Attachments 附件
Routes configuration snippet: 路由配置代码段:
{
path: 'secured-content',
component: SecureComponent,
canLoad: [ AuthGuard ]
}
auth-guard.service.ts: AUTH-guard.service.ts:
import { Injectable } from '@angular/core'
import { CanActivate, CanActivateChild, CanLoad,
Router, ActivatedRouteSnapshot, RouterStateSnapshot, Route
} from '@angular/router'
import { AuthenticationService } from 'app/authentication/authentication.service'
@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
constructor(
private authService: AuthenticationService,
private router: Router
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.checkLogin(state.url)) {
return true
}
return false
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return this.canActivate(route, state)
}
canLoad(route: Route): boolean {
const url = `/${route.path}`
return this.checkLogin(url)
}
private checkLogin(url: string): boolean {
if (this.authService.isAuthenticated()) {
return true
}
this.authService.redirectUrl = url
this.router.navigate([ '/authentication/login' ])
return false
}
}
ng --version: ng --version:
@angular/cli: 1.0.1
node: 6.10.3
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.2
You need to use canActivate :[AuthGuard] in the routing configuration. 您需要在路由配置中使用canActivate :[AuthGuard]。
canActivate: canActivate:
Indicates that a class can implement to be a guard deciding if a route can be activated.
表示可以将某个类实现为后卫,以决定是否可以激活路由。
canLoad: canLoad:
Interface that a class can implement to be a guard deciding if a children can be loaded.
类可以实现为确定是否可以加载子项的后卫的接口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.