Angular2: AuthGuard not working when using browser navigation buttons

Question

I've got a simple AuthGuard configured, that works perfectly fine when navigating "normally" through the application (see code below).

Now imagine following:

User navigates to /content/secured-content , which requires authentication => he is being redirected to /authentication/login because of checkLogin => he successfully authenticated and is therefore redirected back to /content/secured-content => he clicks on the "Logout" button and is successfully logged out ( checkLogin will now return false).

Now the important stuff: When the user now navigates back to the secured-content page (browser's "back" button), neither canActivate nor canActivateChild nor canLoad is being called and the router happily displays the secured content. Secured content itself relies on a session which is destoryed at the logout, so it's still secured, but I want that the user is redirected to the /authentication/login page again and expected that behavior to be honest.

Can you tell me where I made the error in reasoning and if there is a proper solution to my problem?

Attachments

Routes configuration snippet:

{
  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

You need to use canActivate :[AuthGuard] in the routing configuration.

canActivate:

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

canLoad:

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