Angular2 : 브라우저 탐색 버튼을 사용할 때 AuthGuard가 작동하지 않습니다.

Question

간단한 AuthGuard가 구성되어있어 응용 프로그램에서 "정상적으로"탐색 할 때 완벽하게 작동합니다 (아래 코드 참조).

이제 다음과 같은 상상 : => 그는에 /authentication/login 때문에 checkLogin의 리디렉션되고 인증을 요구하는

사용자가 /content/secured-content로 이동 => 그는 성공적으로 인증하기 때문에 /content/secured-content 다시 => 자신이 클릭 리디렉션됩니다 " 로그 아웃 "버튼을 클릭하면 성공적으로 로그 아웃됩니다 (checkLogin은 이제 false를 반환합니다).

은 이제 중요한 물건은 : 사용자가 현재 보안 콘텐츠 페이지 (브라우저의 "뒤로"버튼)로 다시 이동할 때, canActivate도 canActivateChild도 canLoad가 호출되고 있지 둘과 라우터가 행복하게 보안 컨텐츠를 표시합니다. 보안 컨텐트 자체는 로그 아웃시 폐기 된 세션에 의존하므로 보안이 유지되지만 사용자가 다시 /authentication/login 페이지로 리디렉션되어 해당 동작이 정직해야합니다.

추론에서 오류가 발생한 위치와 내 문제에 대한 적절한 해결책이 있는지 알려주실 수 있습니까?

첨부

경로 구성 조각 :

{ 
    path: 'secured-content', 
    component: SecureComponent, 
    canLoad: [ AuthGuard ] 
} 

인증-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 : 클래스가 아이를로드 할 수 있는지를 결정 가드로 구현할 수

인터페이스.