Angular Демонстрация маршрутизации: автоматически удаляется из защищенной зоны, если она вышла из системы (refire canActivate guard)

Question

См. Официальные Angular документы о маршрутизации: https://angular.io/guide/router

И его демонстрацию: https://stackblitz.com/angular/pbqlrdpbpvx

Демо демонстрирует раздел администратора, доступ к которому возможен только в том случае, если состояние службы авторизации isloggedIn возвращает значение true. Раздел защищен с помощью canActivate auth-guard.

По своей природе canActivate guard срабатывает только один раз, когда вы пытаетесь получить доступ к странице. И правильно направляет вас к процессу входа в систему, если ваше состояние службы аутентификации ìsloggedIn возвращает false.

Однако мне нужно, чтобы мой canActivate guard срабатывал каждый раз, когда происходит изменение значения моего состояния службы аутентификации ìsloggedIn , чтобы убедиться, что если статус авторизации сам по себе становится ложным (т. е. если я использую дату истечения срока действия или что-то в более поздней точке), чтобы пользователь автоматически отключился от защищенного раздела. Он не должен оставаться на странице защищенной области, если внезапно значение изменится на false.

Шаги для воспроизведения, добавив простую кнопку выхода из системы на верхней панели навигации:

1. Расширить демо (https://stackblitz.com/angular/pbqlrdpbpvx) с кнопкой выхода сверху:

app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';
import { AuthService } from './auth/auth.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  animations: [ slideInAnimation ]
})
export class AppComponent {  
  constructor(public authService: AuthService) {}

  getAnimationData(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }

  logout() {
    this.authService.logout();
  }
}

app.component. html:

<h1 class="title">Angular Router</h1>
<nav>
  <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
  <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
  <a routerLink="/admin" routerLinkActive="active">Admin</a>
  <a routerLink="/login" routerLinkActive="active">Login</a>
  <a (click)="logout()" *ngIf="authService.isLoggedIn">Click To Logout</a>
  <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
</nav>
<div [@routeAnimation]="getAnimationData(routerOutlet)">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</div>
<router-outlet name="popup"></router-outlet>

Нажмите на кнопку входа в систему и войдите в систему - вы будете перенаправлены в раздел администратора, и появится кнопка выхода из системы на верхней панели навигации.

Нажмите кнопку выхода из системы и видим, что вид остается неизменным. Вы по-прежнему находитесь в разделе администратора.

Предполагаемое поведение:

Если состояние isLoggedIn службы аутентификации становится ложным, пользователь автоматически перенаправляется на страницу входа. Таким образом, защита anActivate должна срабатывать автоматически при изменении значения.

Причина текущего поведения:

canActivate автора проверки, определяющий, можете ли вы получить доступ к странице или нет Только проверяется только один раз в начале при входе на страницу.

Текущее решение:

Расширение функциональности нажатия кнопки выхода из системы с помощью вызова маршрута в раздел входа в систему. Это, однако, не распространяется на все случаи использования.

Заранее спасибо.

Answer 1

Вы пытались вызвать Observable от Auth Guard,

constructor(private authService:AuthService, private router:Router) { }

    canActivate(next:ActivatedRouteSnapshot, state:RouterStateSnapshot) {
        return this.authService.isLoggedIn().map( v => {
            if (v) {
                return true;
            }
        }).catch(() => {
            this.router.navigate(['/login']);
            return Observable.of(false);
        });
    } 

Answer 2

Я думаю, что вы ищете прослушивателя изменений в вашем isLoggedIn Propert ie. Он может работать с ngOnChanges, который описан здесь . Я также нашел несколько примеров для вас.