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 ] 
} 

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：クラスは子供をロードできるかどうかの決定ガードであることを実装することができます

インタフェース。