Դինամիկ կերպով ավելացրեք և հեռացրեք CanActivate Route Guards-ը Angular-ում

Յուրաքանչյուր Angular հավելված իրականացնում է նավարկություն Route աղյուսակի միջոցով: Փորձված Angular ծրագրավորողները տեղյակ են, թե որքան կարևոր է երթուղու վրա պաշտպաններ ավելացնել՝ ճանապարհն ապահովելու համար:

Կլինեն դեպքեր, երբ մշակողը կարող է պահանջել որոշակի հոսքեր, որոնք օգտագործում են նույն ուղին, որպեսզի այդ երթուղու պահակախմբի կողմից չարգելափակվի: Շատ անգամ ծրագրավորողներից շատերը դա անում են՝ ավելացնելով լրացուցիչ տրամաբանություն պահակում: Սա ինքնին վատ գաղափար չէ, բայց դա նշանակում է, որ պահակը կխփվի և կակտիվանա ամեն անգամ, երբ անցնում է երթուղին, նույնիսկ եթե դա պարտադիր չէ:

Ահա այստեղ է գալիս aop-routingգրադարանը:

Այս հոդվածը կբացատրի, թե ինչպես կարելի է հեշտությամբ թարմացնել Angular երթուղղման աղյուսակը գործարկման ժամանակ՝ նավարկության ընթացքում հեռացնելու կամ ավելացնելու CanActivate պահակները երթուղու վրա՝ օգտագործելով aop-routing գրադարանը:

Angular տարբերակի 11-ի դրությամբ հավելվածի գործարկման ընթացքում CanActivate պաշտպանիչները դինամիկ կերպով ավելացնելու կամ հեռացնելու բնօրինակ եղանակ չկա:

Եթե ​​չեք լսել aop-routingգրադարանի մասին, կարդացեք դրա մասին ավելին այստեղ՝ Aop-routing գրադարան Angular-ի համար

Aop-Routing գրադարանը հնարավորություն է տալիս կատարել Imperative and Popstate navigation գործողություններ Angular-ում տպագրական դեկորատորների հեշտությամբ՝ առանց Angular Router օբյեկտի ներմուծման անհրաժեշտության:

Եկեք սկսենք ավելացնելով aop-գրադարանը մեր անկյունային հավելվածին 3 պարզ քայլով.

1. Տեղադրեք aop-routing գրադարանը ձեր անկյունային հավելվածում

npm install aop-routing

2. Գրադարանը տեղադրելուց հետո ավելացրեք AopRoutingModuleձեր հավելվածի վերին մակարդակի/արմատային մոդուլի ներմուծման զանգվածին:

imports: [
   ...
    AopRoutingModule
  ]

3. Ավելացրեք AopNavigationServiceկախվածությունը ձեր վերին մակարդակի/արմատային մոդուլի կոնստրուկտորին:

export class AppModule {
  constructor(private navigationService: AopNavigationService) {}
 }

Aop-routing գրադարանի դինամիկ երթուղավորման աղյուսակի թարմացումը միացնելու համար ներմուծման մեջ ավելացրեք հետևյալ օբյեկտը AopRoutingModule-ում.

@NgModule({
 …
 imports: [
 …
 AopRoutingModule.forRoot({expirementNav: true})
 ],
 …
})

Ստորև բերված սկզբնական կոդը կարելի է մուտք գործել Stackblitz-ում:
Աղբյուրային կոդը՝

https://stackblitz.com/edit/aop-routing-dynamic-guards?file=src/app/app.component.ts

Դիմում.

https://aop-routing-dynamic-guards.stackblitz.io

Ծանոթագրություն. Որպեսզի տպագիր արդյունքը ճիշտ ցուցադրվի, համոզվեք, որ նավարկեք տարբեր էջեր առաջ և առաջ: Օրինակ, եթե դուք արդեն 3-րդ էջում եք՝ սեղմելով «հեռացնել պահակները 3-րդ էջի վրա» կոճակը և այնուհետև նորից սեղմեք էջ3կոճակը,դուք չեք տեսնի ելքի տարբերությունը, քանի որ անկյունային երթուղային շարժիչը գիտի, որ այն գտնվում է նույն ակտիվացված բաղադրիչի վրա: Ճիշտ փորձարկելու համար նավարկեք ետ ու առաջ տարբեր էջերի միջև՝ համապատասխան արդյունքը տեսնելու համար:

Հետևյալ օրինակների համար մենք կօգտագործենք ստորև բերված երթուղային աղյուսակը.

const routes: Routes = [
{ path: "page1", component: Page1Component },
{ path: "page2", component: Page2Component, canActivate: [TestGuard2] },
{ path: "page3", component: Page3Component, canActivate: [TestGuard2, TestGuard3] },
];

Վերոնշյալ հատվածից կարելի է ենթադրել հետևյալը.

• Էջ1-ը իր երթուղու վրա պահակ չունի
• Էջ2-ն ունի TestGuard2 իր երթուղու վրա
• էջ3-ն ունի TestGuard2և TestGuard3 իր երթուղու վրա

Ստորև ներկայացված են մեր app.component.ts և app.component.html

AppComponent.ts-ն ունի 3 պարզ մեթոդ, որոնք օգտագործում են aop-routing գրադարանը՝ համապատասխանաբար էջ1, էջ 2 և էջ 3 նավարկելու համար.

import { Component, VERSION } from "@angular/core";
import { RouteNext } from "aop-routing";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@RouteNext("page1")
public goToNextPage1() {
 this.setNavigationMessage("Navigating to page1");
 this.displayService.guardMsg = "";
}
@RouteNext("page2")
public goToNextPage2() {
 this.setNavigationMessage("Navigating to page2");
 this.displayService.guardMsg = "";
}
@RouteNext("page3")
public goToNextPage3() {
 this.setNavigationMessage("Navigating to page3");
 this.displayService.guardMsg = "";
}
}

app.component.html

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<button (click)="goToNextPage1()">Page1</button>
<button (click)="goToNextPage2()">Page2</button>
<button (click)="goToNextPage3()">Page3</button>
<router-outlet></router-outlet>

Ստորև ներկայացված է TestGuard2-ի իրականացումը (բավականին նույն իրականացումը մյուս պահակների համար): Երբ պահակին հարվածեն, այն էկրանին կտպագրի ընկերական «Բարև պահակից x»:

import { Injectable } from "@angular/core";
import { CanActivate } from "@angular/router";
@Injectable({providedIn: "root"})
export class TestGuard2 implements CanActivate {
public canActivate(): boolean {
 this.displayService.addGuardMsg('Hello from guard 2');
return true;
}}

Այսպիսով, վերը նշված կոդը ամփոփելու համար, սեղմելով կոճակներից յուրաքանչյուրի վրա, կկոչվի դրա համապատասխան մեթոդը, որը կթողարկի «Նավարկում դեպի էջը»և եթե կա պահակ: այդ էջում պահակը կմտնի «Ողջույն պահակախմբից x» էկրանին

import { RouteNext, RouteTransform } from "aop-routing";
import { TestGuard1 } from "./pages/guards/testguard1";
@RouteNext()
public addGuardToPage1() {
this.setNavigationMessage("Navigating to page1 and adding guard");
this.displayService.guardMsg = "";
const routeTransform: RouteTransform = {
    path: 'page1',
    canActivateGuards: [TestGuard1]
 };
return {routeTransform}
}

@RouteNext()
public removeGuardOnPage3() {
this.setNavigationMessage("Navigating to page3 and removing TestGuard2 from its path");
this.displayService.guardMsg = "";
const routeTransform: RouteTransform = {
path: "page3",
canActivateGuards: [TestGuard2]
};
return { routeTransform };
}

@RouteNext()
public removeAllGuardOnRoute() {
this.setNavigationMessage("Navigating to page3 and removing all guards in its path");
this.displayService.guardMsg = "";
const routeTransform: RouteTransform = {
path: "page3",
canActivateGuards: []
};
return { routeTransform };
}