Kontrolowanie dostępu do lub z Route

Aby kontrolować, czy użytkownik może nawigować po danej trasie, czy też z niej, skorzystaj z osłon trasy.

Na przykład możemy chcieć, aby niektóre trasy były dostępne tylko po zalogowaniu się użytkownika lub zaakceptowaniu Warunków. Możemy użyć straży drogowej, aby sprawdzić te warunki i kontrolować dostęp do tras.

Opiekunowie trasy mogą również kontrolować, czy użytkownik może opuścić określoną trasę. Załóżmy na przykład, że użytkownik wpisał informacje w formularzu na stronie, ale nie przesłał formularza. Gdyby opuścili stronę, straciliby informacje. Możemy poprosić użytkownika, jeśli użytkownik spróbuje opuścić trasę bez przesyłania lub zapisywania informacji.

Rejestracja strażników trasy za pomocą tras

Aby korzystać ze strażników dróg, musimy zarejestrować je w określonych trasach, dla których chcemy je uruchomić.

Na przykład, powiedzmy, że mamy trasę accounts, do której mogą się dostać tylko zalogowani użytkownicy. Ta strona ma również formularze i chcemy upewnić się, że użytkownik przesłał niezapisane zmiany przed opuszczeniem strony kont.

W naszej konfiguracji trasy możemy dodać naszych strażników do tej trasy:

import { Routes, RouterModule } from '@angular/router';
import { AccountPage } from './account-page';
import { LoginRouteGuard } from './login-route-guard';
import { SaveFormsGuard } from './save-forms-guard';

const routes: Routes = [
  { path: 'home', component: HomePage },
  {
    path: 'accounts',
    component: AccountPage,
    canActivate: [LoginRouteGuard],
    canDeactivate: [SaveFormsGuard]
  }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(routes);

Teraz LoginRouteGuard zostanie sprawdzony przez router po aktywacji trasyaccounts, a SaveFormsGuard zostanie sprawdzony po opuszczeniu tej trasy.

Implementacja CanActivate

Spójrzmy na przykład aktywuj strażnik, który sprawdza, czy użytkownik jest zalogowany:

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { LoginService } from './login-service';

@Injectable()
export class LoginRouteGuard implements CanActivate {

  constructor(private loginService: LoginService) {}

  canActivate() {
    return this.loginService.isLoggedIn();
  }
}

Ta klasa implementuje interfejs CanActivate poprzez implementację funkcji canActivate.

Kiedy canActivate zwraca wartość true, użytkownik może aktywować trasę. Kiedy canActivate zwraca wartość false, użytkownik nie może uzyskać dostępu do trasy. W powyższym przykładzie zezwalamy na dostęp, gdy użytkownik jest zalogowany.

canActivate może również służyć do powiadamiania użytkownika, że ​​nie może uzyskać dostępu do tej części aplikacji lub przekierowania ich na stronę logowania.

Zobacz Oficjalną definicję dla CanActivate

Wdrażanie CanDeactivate

CanDeactivate działa w podobny sposób jak CanActivate, ale istnieją pewne istotne różnice. Funkcja canDeactivate przekazuje komponent dezaktywowany jako argument do funkcji:

export interface CanDeactivate<T> {
  canDeactivate(component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
      Observable<boolean>|Promise<boolean>|boolean;
}

Możemy użyć tego komponentu, aby określić, czy użytkownik może dezaktywować.

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { AccountPage } from './account-page';

@Injectable()
export class SaveFormsGuard implements CanDeactivate<AccountPage> {

  canDeactivate(component: AccountPage) {
    return component.areFormsSaved();
  }

}

Zobacz Oficjalną definicję CanDeactivate

Osłony Async Route

Funkcje canActivate i canDeactivate mogą zwracać wartości typu boolean lubObibleable <boolean> (Obserwowalny, który rozwiąże wartośćboolean). Jeśli chcesz wykonać żądanie asynchroniczne (takie jak żądanie serwera), aby określić, czy użytkownik może nawigować po trasie, czy też z niej, możesz po prostu zwrócić komunikat Observable <boolean> . Router będzie czekał, aż zostanie rozwiązany i użyje tej wartości do określenia dostępu.

Na przykład, gdy użytkownik odejdzie, możesz skorzystać z usługi dialogowej, aby poprosić użytkownika o potwierdzenie nawigacji. Okno dialogowe zwraca wartość Observable <boolean> <która ma wartość true, jeśli użytkownik kliknie przyciskOKlub false, jeśli użytkownik kliknie przyciskAnuluj.

  canDeactivate() {
    return dialogService.confirm('Discard unsaved changes?');
  }

Zobacz przykład [053]

Zobacz Oficjalną Dokumentację dla Strażników Trasy