Упрощенный способ аутентификации при угловой маршрутизации

Переиздано Платоном

Читают: 0

В этой статье мы обсудим интуитивно понятный способ реализации аутентификации в угловом приложении с использованием @rxweb/угловой-маршрутизатор

@rxweb/angular-router — это единый пакет для управления маршрутами, промежуточным ПО, доступом, аутентификацией и шифрованием URL-адресов отдельным способом.

Чтобы установить и настроить @rxweb/angular-router в приложении, установите пакет и объявите RxRoutingModule в разделе импорта корневого модуля. Подробную информацию о базе и настройке см. Представляем @rxweb/angular-router: лучше обрабатывать Angular Routing

@rxweb/angular-router обеспечивает аутентификацию на глобальном уровне и использует декоратор @routerModule.

Параметру аутентификации будет предоставлен глобальный класс AuthResolver, который будет разрешать пользовательский объект всякий раз, когда пользователь будет входить в систему, после чего пользовательский объект будет доступен компоненту всякий раз, когда происходит навигация по маршруту, даже если страница обновляется. Нет необходимости хранить это в локальном хранилище, что обеспечивает лучшую безопасность.

Давайте начнем с добавления параметра аутентификации. Начните с создания класса с именем AuthResolver, который будет разрешать пользовательский объект, отправляя запрос на сервер, а затем будет предоставлять пользовательский объект компоненту всякий раз, когда происходит навигация.

ResolveAuth разрешает объект аутентификации в зависимости от вашего пользовательского кода, здесь мы берем пример, когда аутентификация разрешается из файла json.

После создания AuthResolver.ts выглядит так:

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; }
}

Далее добавляем его в параметр аутентификации @routerModule, который мы создали ранее:

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

Вот рабочий пример преобразователя аутентификации

аутентификация маршрутизатор

В этой статье мы рассмотрели базовые сведения, а также преимущества пакета @rxweb/angular-router и централизованную аутентификацию. @rxweb/угловой-маршрутизатор также предоставляет глобально доступную авторизацию и промежуточное ПО, которые используются для разрешения объекта авторизации и выполнения действий до навигации по маршруту.