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 przyciskOK
lub false, jeśli użytkownik kliknie przyciskAnuluj
.
canDeactivate() {
return dialogService.confirm('Discard unsaved changes?');
}
Zobacz przykład [053]