Angular2:使用浏览器导航按钮时AuthGuard不工作
我已经配置了一个简单的AuthGuard,当在应用程序中“正常”导航时,它工作得非常好(请参阅下面的代码) 现在想象一下: 用户导航到Angular2:使用浏览器导航按钮时AuthGuard不工作,angular,authentication,angular2-router,canactivate,Angular,Authentication,Angular2 Router,Canactivate,我已经配置了一个简单的AuthGuard,当在应用程序中“正常”导航时,它工作得非常好(请参阅下面的代码) 现在想象一下: 用户导航到/content/secured content,这需要身份验证=>由于checkLogin=>他成功地进行了身份验证,因此被重定向回/content/secured content=>他单击“注销”按钮并成功注销(checkLogin现在将返回false) 现在重要的事情是:当用户现在导航回安全内容页面(浏览器的“后退”按钮)时,canActivate或canA
/content/secured content
,这需要身份验证=>由于checkLogin
=>他成功地进行了身份验证,因此被重定向回/content/secured content
=>他单击“注销”按钮并成功注销(checkLogin
现在将返回false)
现在重要的事情是:当用户现在导航回安全内容页面(浏览器的“后退”按钮)时,canActivate
或canActivateChild
或canLoad
都不会被调用,路由器会愉快地显示安全内容。安全内容本身依赖于在注销时被破坏的会话,因此它仍然是安全的,但我希望用户再次重定向到/authentication/login
页面,并期望该行为是诚实的
你能告诉我我在推理中的错误在哪里,我的问题是否有适当的解决方案吗
附件
路由配置代码段:
{
path: 'secured-content',
component: SecureComponent,
canLoad: [ AuthGuard ]
}
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--版本:
@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
您需要在路由配置中使用canActivate:[AuthGuard] 激活: 指示类可以实现为决定是否可以激活路由的守卫 可加载: 一个类可以实现为一个保护的接口,该接口决定是否可以加载子类
为什么不能加载?可能应该是canActivate?非常感谢,这是解决方案,我没有看到。。。你能把它作为一个答案,这样我就可以把它标记为(明显的)解决方案吗?