Angular2:使用浏览器导航按钮时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

我已经配置了一个简单的AuthGuard,当在应用程序中“正常”导航时,它工作得非常好(请参阅下面的代码)

现在想象一下:

用户导航到
/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?非常感谢,这是解决方案,我没有看到。。。你能把它作为一个答案,这样我就可以把它标记为(明显的)解决方案吗?