Uproszczony sposób przeprowadzania uwierzytelniania w routingu kątowym

Opublikowane ponownie przez Plato

Obserwuje: 0

W tym artykule omawiamy intuicyjny sposób implementacji Uwierzytelniania w aplikacji Angular za pomocą @rxweb/router kątowy

@rxweb/angular-router to pojedynczy pakiet do zarządzania trasami, oprogramowaniem pośredniczącym, dostępem, autentycznością i szyfrowaniem adresów URL w sposób segregowany

Aby zainstalować i skonfigurować @rxweb/angular-router w aplikacji, zainstaluj pakiet i zadeklaruj RxRoutingModule w sekcji importu modułu głównego. Aby uzyskać szczegółowe informacje na temat stacji bazowej i konfiguracji, patrz Przedstawiamy @rxweb/angular-router: Lepsza obsługa routingu kątowego

@rxweb/angular-router zapewnia uwierzytelnianie na poziomie globalnym i używanie dekoratora @routerModule.

Parametrowi uwierzytelniania zostanie dostarczona globalna klasa AuthResolver, która rozwiąże obiekt użytkownika za każdym razem, gdy użytkownik zaloguje się po tym, obiekt użytkownika będzie dostępny dla komponentu za każdym razem, gdy nastąpi nawigacja po trasie, nawet jeśli strona zostanie odświeżona, Nie ma potrzeby przechowywać to w pamięci lokalnej, co zapewnia lepsze bezpieczeństwo.

Zacznijmy od dodania parametru uwierzytelniania, Zacznijmy od stworzenia klasy o nazwie AuthResolver, która rozwiąże obiekt użytkownika, wysyłając żądanie do serwera, a następnie dostarczy obiekt użytkownika do komponentu za każdym razem, gdy nastąpi nawigacja.

resolveAuth rozwiąże obiekt auth w zależności od Twojego niestandardowego kodu, tutaj bierzemy przykład, w którym auth jest rozwiązywane z pliku json

Po utworzeniu AuthResolver.ts wygląda tak:

import { Injectable } from "@angular/core";
import { IAuthResolver } from "@rxweb/angular-router";
import { HttpClient } from "@angular/common/http";
import { ApplicationObjects } from "./application-objects"; @Injectable({ providedIn: "root"
})
export class AuthResolver implements IAuthResolver { constructor(private http: HttpClient) {} resolveAuth(): Promise<{ [key: string]: any }> | { [key: string]: any } { var promise = new Promise<{ [key: string]: any }>((resolve, reject) => { if (ApplicationObjects.user == undefined) this.http.get("assets/json/user.json").subscribe(response => { ApplicationObjects.user = response; resolve(response); }); }); return promise; }
}

Dalsze dodawanie go w parametrze uwierzytelniania @routerModule, który utworzyliśmy wcześniej:

@routerModule({ authentication: AuthResolver, authorization :, middlewares : [] })
@NgModule({...})
export class AppModule { }

Oto działający przykład programu rozpoznawania nazw uwierzytelniania

uwierzytelniania routera

W tym artykule omówiliśmy podstawowy przegląd wraz z zaletami pakietu @rxweb/angular-router wraz ze scentralizowanym uwierzytelnianiem. @rxweb/router kątowy zapewnia również globalnie dostępną autoryzację i oprogramowanie pośredniczące, które są używane do rozwiązywania obiektu autoryzacji i wykonywania działań przed trasowaniem nawigacji.