Angular2: AuthGuard не работает при использовании кнопок навигации браузера

У меня настроен простой AuthGuard, который отлично работает при «обычной» навигации по приложению (см. код ниже).

А теперь представьте следующее:

Пользователь переходит к /content/secured-content, для которого требуется аутентификация => он перенаправляется на /authentication/login из-за checkLogin => он успешно прошел аутентификацию и, следовательно, перенаправляется обратно на /content/secured-content => он нажимает кнопку «Выход» и успешно выходит из системы (checkLogin теперь вернуть ложь).

Теперь важные вещи: когда пользователь теперь переходит обратно на страницу с защищенным содержимым (кнопка «назад» в браузере), ни 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
  }
}

нг --версия:

@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

person Naduweisstschon    schedule 12.05.2017    source источник
comment
почему можно загрузить? может быть, это должно быть canActivate?   -  person Julia Passynkova    schedule 12.05.2017
comment
Большое вам большое спасибо, это решение, а я его не видел... Не могли бы вы добавить его в качестве ответа, чтобы я мог отметить его как (очевидное) решение?   -  person Naduweisstschon    schedule 12.05.2017


Ответы (1)


Вам нужно использовать canActivate:[AuthGuard] в конфигурации маршрутизации.

можноактивировать:

Указывает, что класс может быть реализован как охранник, решающий, можно ли активировать маршрут.

можетЗагрузить:

Интерфейс, который класс может реализовать как охранник, решающий, можно ли загружать дочерние элементы.

person Julia Passynkova    schedule 12.05.2017