Angular2：使用浏览器导航按钮时 AuthGuard 不工作

Question

我已经配置了一个简单的 AuthGuard，在 "normally" 通过应用程序导航时工作得很好（见下面的代码）。

现在想象一下：

用户导航到 /content/secured-content，这需要身份验证 => 他被重定向到 /authentication/login 因为 checkLogin => 他成功通过身份验证，因此被重定向回 /content/secured-content => 他点击 "Logout" 按钮并成功注销（checkLogin 现在 return false）。

现在是重要的事情：当用户现在导航回安全内容页面（浏览器的 "back" 按钮）时，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 --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

Answer 1

你需要在路由配置中使用canActivate:[AuthGuard]

可以激活：

Indicates that a class can implement to be a guard deciding if a route can be activated.

可以加载：

Interface that a class can implement to be a guard deciding if a children can be loaded.

Angular2：使用浏览器导航按钮时 AuthGuard 不工作

Angular2: AuthGuard not working when using browser navigation buttons

authentication

angular2-router

canactivate

angular