Question

我配置了一个简单的AuthGuard，在通过应用程序“正常”导航时效果非常好（参见下面的代码）。

现在想象一下：

用户导航至/content/secured-content，这需要身份验证=＆gt;由于/authentication/login =＆gt;他被重定向到checkLogin他成功通过身份验证，因此被重定向回/content/secured-content =＆gt;他点击“退出”按钮并成功注销（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 --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]。

canActivate：

表示一个类可以实现为一个警卫，决定是否可以激活路由。

canLoad：

一个类可以实现的接口，以确定是否可以加载子级。

Angular2：使用浏览器导航按钮时AuthGuard无法正常工作

1 个答案: