greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/arabic/angular/routing/index.md

41 KiB
Raw Blame History

title localeTitle
Routing التوجيه

التوجيه

التحفيز

التوجيه أمر ضروري. تستضيف العديد من تطبيقات الويب الحديثة الكثير من المعلومات لصفحة واحدة. يجب ألا يضطر المستخدمون إلى التمرير عبر محتوى التطبيق بأكمله أيضًا. يحتاج التطبيق إلى تقسيم نفسه إلى أقسام مميزة.

يقوم المستخدمون بتحديد أولويات المعلومات الضرورية. يساعدهم التوجيه في العثور على قسم التطبيق بهذه المعلومات. قد توجد أية معلومات أخرى مفيدة للمستخدمين الآخرين على مسار منفصل تمامًا. مع التوجيه ، يمكن لكل المستخدمين العثور على ما يحتاجون إليه بسرعة. تبقى التفاصيل غير ذات الصلة محجوبة خلف طرق غير ملائمة.

يتفوق التوجيه في فرز وتقييد الوصول إلى بيانات التطبيق. يجب عدم عرض البيانات الحساسة أبدًا للمستخدمين غير المصرح لهم. بين كل طريق قد يتدخل التطبيق. يمكن فحص جلسة المستخدم لأغراض المصادقة. يحدد هذا الفحص ما يعرضه المسار إذا كان يجب تقديمه على الإطلاق. يوفر التوجيه للمطورين فرصة مثالية للتحقق من المستخدم قبل المتابعة.

إن إنشاء قائمة من المسارات يعزز التنظيم أيضًا. من حيث التنمية ، فإنه يحافظ على التفكير المطور في أقسام مميزة. يستفيد المستخدمون أيضًا من هذا ، ولكن المطورين الأكثر تقدمًا عند التنقل في شفرة التطبيق. ترسم قائمة أجهزة التوجيه المبرمجة نموذجًا دقيقًا للواجهة الأمامية للتطبيق.

بالنسبة إلى Angular ، يأخذ التوجيه الخاص به مكتبته بأكملها في إطار العمل. تدعم جميع إطارات الواجهة الأمامية الحديثة التوجيه ، ولا تختلف Angular عن غيرها. يحدث التوجيه من جانب العميل باستخدام إما التجزئة أو توجيه الموقع. يسمح كلا الأنماط للعميل بإدارة المسارات الخاصة به. لا توجد مساعدة إضافية من الخادم ضرورية بعد الطلب الأولي.

ونادرًا ما يتم تحديث متصفح الويب باستخدام التوجيه من جانب العميل. لا تزال أدوات مساعدة متصفح الويب مثل الإشارات المرجعية والسجل وشريط العناوين تعمل على الرغم من عدم التحديث. وهذا ما يجعل تجربة توجيه البقعة لا تفسد المتصفح. لا يعاد تحميل أي صفحة أكثر هياج أثناء التوجيه إلى صفحة مختلفة.

يضيف الزاوي على طبقة من التجريد على التقنيات الأساسية المستخدمة للتوجيه. تعتزم هذه المقالة لشرح هذا التجريد. توجد إستراتيجيتان التوجيه في Angular: location path and hash. تركز هذه المقالة على استراتيجية موقع المسار منذ ذلك الخيار الافتراضي.

بالإضافة إلى ذلك ، قد يؤدي موقع المسار إلى إهمال توجيه التجزئة بعد الإصدار الكامل من Angular Universal . وبغض النظر عن ذلك ، فإن الاستراتيجيتين متشابهة جدًا في التنفيذ. تعلم واحد يتعلم الآخر. حان الوقت للبدء!

RouterModule Setup

توجيه الأدوات المساعدة للتصدير باستخدام RouterModule متاح من @angular/router . وهو ليس جزءًا من المكتبة الأساسية حيث لا تتطلب جميع التطبيقات التوجيه. الطريقة الأكثر تقليدية لتقديم التوجيه هي وحدة نمطية خاصة بها.

مع تزايد تعقيد الطريق ، فإن امتلاكه كوحدة خاصة به سيعزز من بساطة وحدة الجذر. ابقائه بسيط غبي دون المساومة على وظائف يشكل التصميم الجيد للوحدات.

`import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';

import { AComponent } from '../../components/a/a.component'; import { BComponent } from '../../components/b/b.component';

// an array of soon-to-be routes! const routes: Routes = [];

@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } `

.forRoot(...) هي وظيفة فئة متوفرة من فئة RouterModule. تقبل وظيفة مجموعة من Route الكائنات في Routes . .forRoot(...) بتكوين .forRoot(...) - تحميل أثناء به البديلة .forChild(...) لتكوين التحميل البطيئة.

تحميل حريصة يعني أن تحميل المسارات محتواها في التطبيق من الحصول على الذهاب. التحميل الزائف يحدث عند الطلب. محور هذه المقالة هو تحميل حريصة. هذا هو النهج الافتراضي للتحميل في تطبيق. يبدو تعريف فئة RouterModule شيئًا مثل كتلة التعليمة البرمجية التالية.

`@NgModule({ // … lots of metadata ... }) export class RouterModule { forRoot(routes: Routes) { // … configuration for eagerly loaded routes … }

forChild(routes: Routes) { // … configuration for lazily loaded routes … } } `

لا تقلق بشأن تفاصيل التكوين التي يغفلها المثال مع التعليقات. وجود فهم عام سيفعل في الوقت الحالي.

لاحظ كيف تقوم AppRoutingModule باستيراد RouterModule أثناء تصديرها أيضًا. هذا من المنطقي نظرا AppRoutingModule هو وحدة ميزة. انها تستورد في وحدة الجذر باعتبارها وحدة نمطية. فإنه يكشف توجيهات RouterModule ، واجهات ، والخدمات إلى شجرة مكون الجذر.

هذا يفسر لماذا يجب على AppRoutingModule تصدير RouterModule. يفعل ذلك من أجل شجرة المكونات الأساسية في وحدة الجذر. يحتاج الوصول إلى تلك المرافق التوجيه!

`import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppComponent } from './app.component'; import { AComponent } from './components/a/a.component'; import { BComponent } from './components/b/b.component'; import { AppRoutingModule } from './modules/app-routing/app-routing.module';

@NgModule({ declarations: [ AppComponent, AComponent, BComponent ], imports: [ AppRoutingModule, // routing feature module BrowserModule ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { } `

الواردات الرمز المميز AppRoutingModule من الأعلى. إدراج رمزي في صفيف واردات وحدة الجذر. قد تستخدم شجرة مكون الجذر الآن مكتبة RouterModule. يتضمن ذلك توجيهاته واجهاته وخدماته كما سبق ذكره. شكرا جزيلا ل AppRoutingModule لتصدير RouterModule!

وستكون أدوات RouterModule مفيدة لمكونات الجذر. يستخدم HTML الأساسي لـ AppComponent من توجيه واحد: router-outlet .

`

`

routerLink عبارة عن توجيه سمة من سمات RouterModule. سيتم إرفاقه بكل عنصر من عناصر <ul></ul> بمجرد إعداد المسارات. router-outlet عبارة عن توجيه مكون ذو سلوك مثير للاهتمام. يعمل أكثر كمؤشر لعرض المحتوى الموجه. نتائج المحتوى الموجه من التنقل إلى مسار معين. عادةً ما يعني ذلك مكونًا واحدًا تم تكوينه في AppRoutingModule

يتم عرض المحتوى الموجّه مباشرةً بعد <router-outlet></router-outlet> . لا شيء يدخل في داخله. هذا لا يجعل الكثير من فرق كبير. ومع ذلك ، لا تتوقع أن يتصرف router-outlet مثل حاوية للمحتوى الموجه. إنه مجرد علامة لإلحاق محتوى موجه إلى نموذج كائن المستند (DOM).

التوجيه الأساسي

يحدد القسم السابق الإعداد الأساسي للتوجيه. قبل أن يحدث التوجيه الفعلي ، يجب معالجة بعض الأمور الأخرى

السؤال الأول الذي يجب معالجته هو ما هي الطرق التي سيستهلكها هذا التطبيق؟ حسنا ، هناك نوعان من المكونات: AComponent و BComponent. يجب أن يكون لكل واحد طريقه الخاص. يمكنهم تقديمها من منفذ router-outlet في AppComponent اعتمادًا على موقع المسار الحالي.

يحدد موقع المسار (أو المسار) ما يتم إلحاقه بأصل موقع الويب (على سبيل المثال http: // localhost: 4200) من خلال سلسلة من المائلة ( / ).

`// … same imports from before …

const routes: Routes = [ { path: 'A', component: AComponent }, { path: 'B', component: BComponent } ];

@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } `

http://localhost:4200/A يجعل AComponent من منفذ router-outlet الخاص بـ AppComponent. http://localhost:4200/B renders BComponent. تحتاج إلى وسيلة لتوجيه إلى هذه المواقع دون استخدام شريط العنوان. يجب ألا يعتمد التطبيق على شريط عناوين متصفح الإنترنت للتنقل.

يكمل CSS العالمي (أوراق الأنماط المتتالية) HTML أسفله. يجب أن يكون رابط جهاز التوجيه في التطبيق مظهرًا رائعًا. ينطبق هذا CSS على جميع الأمثلة الأخرى أيضًا.

`/* global styles.css */

ul li { cursor: pointer; display: inline-block; padding: 20px; margin: 5px; background-color: whitesmoke; border-radius: 5px; border: 1px solid black; }

ul li:hover { background-color: lightgrey; } `

`

  • Go to A!
  • Go to B!
`

هذا هو التوجيه الأساسي! يؤدي النقر فوق أي من مسارات routerLink إلى توجيه عنوان الويب. يعيد تعيينه دون تحديث متصفح الويب. يقوم Router Angular بتحديد خرائط العنوان الموجه إلى Routes تكوينها في AppRoutingModule. يطابق العنوان إلى path ممتلكات واحد Route الكائن ضمن مجموعة. دائمًا ما تفوز المباراة الأولى ، لذا يجب أن تكون جميع المسارات المطابقة تقع في نهاية صفيف Routes .

تمنع جميع المسارات المتوافقة التطبيق من التعطل إذا تعذر مطابقة المسار الحالي. يمكن أن يحدث هذا من شريط العنوان حيث قد يكتب المستخدم في أي مسار. لهذا ، يوفر Angular قيمة مسار حرف البدل ** التي تقبل جميع المسارات. يعرض هذا المسار عادةً مكون PageNotFoundComponent الذي يعرض "خطأ 404: الصفحة غير موجودة".

`// … PageNotFoundComponent imported along with everything else …

const routes: Routes = [ { path: 'A', component: AComponent }, { path: 'B', component: BComponent }, { path: '', redirectTo: 'A', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; `

في Route الكائن الذي يحتوي redirectTo يحافظ على PageNotFoundComponent من تقديم نتيجة http://localhost:4200 . هذا هو الطريق الرئيسية للتطبيقات. لإصلاح هذا ، redirectTo توجيه المسار الرئيسي إلى http://localhost:4200/A http://localhost:4200/A يصبح بطريقة http://localhost:4200/A مباشرة مسار المنزل الجديد للتطبيق.

يشير pathMatch: 'full' إلى كائن Route لمطابقة المسار الرئيسي ( http://localhost:4200 ). يطابق المسار الفارغ.

هذان الجديدة Route الأشياء تذهب في نهاية المصفوفة منذ يفوز المباراة الأولى. دائمًا ما يتطابق عنصر الصفيف الأخير ( path: '**' ) ، حتى يتحول إلى آخر.

هناك شيء آخر يستحق العناء قبل الانتقال. كيف يعرف المستخدم مكان تواجده في التطبيق بالنسبة إلى المسار الحالي؟ بالتأكيد قد يكون هناك محتوى محدد للطريق ، ولكن كيف يفترض أن يقوم المستخدم بإجراء ذلك الاتصال؟ يجب أن يكون هناك شكل من أشكال التمييز المطبّق على موجِّه التوجيه. بهذه الطريقة ، سيعرف المستخدم أي مسار نشط لصفحة الويب المحددة.

هذا اصلاحه سهل. عند النقر فوق عنصر routerLink ، يعين Router في Angular التركيز عليه. يمكن أن يؤدي هذا التركيز إلى تشغيل أنماط معينة توفر ملاحظات مفيدة للمستخدم. يمكن لتوجيه routerLinkActive تتبع هذا التركيز للمطور.

`

  • Go to A!
  • Go to B!
`

يمثل التعيين الصحيح لـ routerLinkActive سلسلة من الفئات. يصور هذا المثال فئة واحدة فقط (. .active ) ، ولكن قد يتم تطبيق أي عدد من الفئات المفصول .active . عندما يعين Router التركيز على routerLink ، يتم تطبيق الفئات المحددة بفراغات على عنصر المضيف. عندما ينتقل التركيز بعيدًا ، تتم إزالة الفئات تلقائيًا.

`/* global styles.css */

.active { background-color: lightgrey !important; } `

يمكن للمستخدمين الآن التعرف بسهولة على كيفية تطابق المسار الحالي ومحتوى الصفحة. تسليط الضوء على lightgrey ينطبق على routerLink مطابقة الطريق الحالي. يضمن !important تجاوز التمييز stylings مضمنة.

طرق معتبرة

لا يجب أن تكون المسارات مشفرة بالكامل. يمكن أن تحتوي على متغيرات ديناميكية قابلة للإحاطة من المكون المقابل لكائن Route . يتم تعريف هذه المتغيرات كمعلمات عند كتابة مسار المسار.

تكون معلمات المسار اختيارية أو إلزامية لمطابقة Route معين. يعتمد ذلك على كيفية كتابة المسار لمعلماته. توجد إستراتيجيتان: المصفوفة والمعاملة التقليدية.

تبدأ المعلمات التقليدية من صفيف Routes المكوّنة في AppRoutingModule.

const routes: Routes = [ // … other routes … { path: 'B', component: BComponent }, { path: 'B/:parameter', component: BComponent }, // … other routes … ];

التركيز على مسارين BComponent. ستحدث المعلمة في نهاية المطاف في كلا الطريقين.

تحدث المعلمات التقليدية في Route BComponent الثاني. B/:parameter تحتوي على parameter المعلمة كما هو مبين مع : . أيا كان ما يلي النقطتين علامة اسم المعلمة. parameter المعلمة ضرورية من أجل Route BComponent الثاني لمطابقة.

يقرأ parameter في قيمة كل ما يمر في الطريق. التوجيه إلى http://localhost:4200/B/randomValue سيعين parameter قيمة randomValue . يمكن أن تتضمن هذه القيمة أي شيء بجانب آخر / . على سبيل المثال ، لن يقوم http://localhost:4200/B/randomValue/blahBlah بتشغيل Route BComponent الثاني. يعرض PageNotFoundComponent بدلاً من ذلك.

يمكن BComponent مرجع معلمات التوجيه من فئة المكون الخاص به. كل من النهج إلى المعلمات (مصفوفة والتقليدية) تعطي النتائج نفسها في BComponent. قبل رؤية BComponent ، افحص شكل مصفوفة المعلمات أدناه.

`// app.component.ts

import { Component } from '@angular/core'; import { Router } from '@angular/router';

@Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor(private router: Router) { }

routeMatrixParam(value: string) { if (value) this.router.navigate(['B', { parameter: value }]); // matrix parameter else this.router.navigate(['B']); }

routeAddressParam(value: string) { this.router.navigate(['B', value]); } } `

يوفر نظام حقن التبعية في Angular إمكانية إنشاء مثيل لجهاز Router . يتيح هذا المكون برمجيًا التوجيه. تقبل الدالة .navigate(...) صفيف من القيم التي يتم .navigate(...) إلى مسار قابل للتوجيه . شيء من هذا القبيل .navigate(['path', 'to', 'something']) يحل إلى http://localhost:4200/path/to/something . .navigate(...) يضيف علامات / مسارات المسار عند تطبيع الصفيف في مسار قابل للتوجيه .

يحدث النموذج الثاني من parameterization في routeMatrixParam(...) . انظر هذا السطر من الكود: this.router.navigate(['B', { parameter: value }]) . هذا الشكل من parameter هو معلمة مصفوفة. قيمتها اختيارية لأول BComponent Route لمباراة ( /B ). يطابق Route بغض النظر عن وجود المعلمة في المسار.

routeAddressParam(...) يطابق http://localhost:4200/B/randomValue parameterization http://localhost:4200/B/randomValue . تحتاج هذه الإستراتيجية التقليدية إلى معلمة تتطابق مع مسار BComponent الثاني ( B/:parameter ).

تتعلق استراتيجية المصفوفة بـ routeMatrixParam(...) . مع أو بدون معلمة مصفوفة في المسار الخاص به ، لا يزال يطابق مسار BComponent الأول. تمرير parameter المعلمة إلى BComponent تماماً مثل الطريقة التقليدية.

لإضفاء فهم كامل على الشفرة الواردة أعلاه ، إليك شفرة HTML المقابلة للنموذج.

` // app.component.html

  • Go to A!
  • Matrix!
  • Param!
`

في القالب ، يتم قبول القيم كمدخل نصي. يقوم الإدخال بحقنها في مسار المسار كمعلمة. توجد مجموعتان منفصلتان من الصناديق لكل إستراتيجية معلمات (تقليدية ومصفوفة). مع كافة القطع معاً ، فقد حان الوقت لفحص فئة مكون BComponent.

``// b.component.ts

import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({ selector: 'app-b', template: `

Route param: {{ currParam }}

` }) export class BComponent implements OnInit { currParam: string = "";

constructor(private route: ActivatedRoute) { }

ngOnInit() { this.route.params.subscribe((param: ParamMap) => { this.currParam = param['parameter']; }); } } ``

نتائج BComponent من أي من مسارين BComponent في AppRoutingModule. ActivatedRoute instantiates في مجموعة من المعلومات المفيدة المتعلقة بالطريق الحالي. هذا هو المسار الذي تسبب في جعل BComponent. ActivatedRoute عبر حقن التبعية التي تستهدف مُنشئ الصف.

حقل .params الخاص بـ ActivatedRoute.params بإرجاع Observable الذي يقوم بإصدار معلمات المسار. لاحظ كيف أن نهجين المعلمات المختلفين ينتجان parameter المعلمة. عاد Observable تنبعث بأنها زوج قيمة المفتاح-من داخل ParamMap الكائن.

بين نهج المعايير والثوابت، وهما parameter المعلمة حل مماثل. تنبعث القيمة من ActivatedRoute.params على الرغم من النهج الخاص بالمعلمة.

يميز شريط العناوين النتائج النهائية لكل أسلوب. تعطي معلمات المصفوفة (اختياري لمطابقة Route ) العنوان: http://localhost:4200/B;parameter=randomValue . تعطي المعلمات التقليدية (المطلوبة لمطابقة Route ): http://localhost:4200/B/randomValue .

وفي كلتا الحالتين ، نفس النتائج BComponent. الفارق الفعلي: مختلف مباريات BComponent Route . هذا يعتمد كليا على استراتيجية المعلمات. يضمن نهج المصفوفة المعلمات اختيارية لمطابقة Route . النهج التقليدي يتطلب منهم.

المسارات المتداخلة

قد تشكل Routes تسلسلاً هرمياً. في DOM ، ينطوي ذلك على router-outlet أحد الوالدين router-outlet router-outlet واحد على الأقل. في شريط العنوان ، يبدو كالتالي: http://localhost/parentRoutes/childRoutes . في تكوين Routes ، تشير الخاصية children: [] إلى كائن Route أنه يحتوي على مسارات متداخلة (فرعية).

`import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';

import { NestComponent } from '../../components/nest/nest.component'; import { AComponent } from '../../components/nest/a/a.component'; import { BComponent } from '../../components/nest/b/b.component';

const routes: Routes = [ { path: 'nest', component: NestComponent, children: [ { path: 'A', component: AComponent }, { path: 'B', component: BComponent } ] } ];

@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule { } `

``// nest.component.ts

import { Component } from '@angular/core';

@Component({ selector: 'app-nest', template: `

  • Go to A!
  • Go to B!
` }) export class NestComponent { } ``

يعرض NestComponent router-outlet بعد تقديم نفسه من router-outlet آخر مستوى الجذر في AppComponent. قد يتم عرض router-outlet الخاص بقالب NestComponent إما AComponent ( /nest/A ) أو BComponent ( /nest/B ).

يعكس هذا AppRoutingModule تعشش في NestComponent في Route الكائن. يحتوي الحقل children: [] على صفيف من كائنات Route . هذه Route الكائن يجوز أيضا طرق عش في هم children: [] المجالات. يمكن أن يستمر هذا مع العديد من طبقات المسارات المتداخلة. يوضح المثال أعلاه طبقتين من التعشيش.

يحتوي كل routerLink على ./ مقارنة بـ / . ال . يضمن أن يلحق routerLink بمسار المسار. يستبدل routerLink تمامًا المسار بطريقة أخرى. بعد التوجيه إلى /nest ، . يتوسع في /nest .

يفيد ذلك في التوجيه إلى /nest/A أو /nest/B من مسار .nest . تشكل A و B المسارات المتداخلة /nest . التوجيه إلى /A أو /B إرجاع PageNotFound. /nest يجب أن تذييل المسارين.

إلقاء نظرة على AppComponent التي تحتوي على router-outlet مستوى الجذر في القالب الخاص به. AppComponent هي الطبقة الأولى من التعشيش بينما NestComponent هي الثانية.

``import { Component } from '@angular/core';

@Component({ selector: 'app-root', template: `

  • Go to nested routes!
  • Back out of the nested routes!
` }) export class AppComponent { } ``

داخل كائن Route العش ، children: [] يحتوي على مسارين متداخلين. ينتجون في AComponent و BComponent عند التوجيه من /nest كما تمت مناقشته مسبقًا. هذه المكونات بسيطة جدا من أجل العرض. <li routerLink="/">...</li> يتيح لك التنقل من مسارات العش لإعادة تعيين المثال عن طريق الانتقال إلى المسار الرئيسي.

``import { Component } from '@angular/core';

@Component({ selector: 'app-a', template: `

a works!

` }) export class AComponent { } ``

``import { Component } from '@angular/core';

@Component({ selector: 'app-b', template: `

b works!

` }) export class BComponent { } ``

children: [] تقبل children: [] المصفوفة عنصر Route كعناصر. children: [] يمكن أن تنطبق على أي من هذه العناصر كذلك. يمكن لأطفال هذه العناصر الاستمرار في التعشيش. قد يستمر هذا النمط مع العديد من طبقات التعشيش. قم router-outlet في القالب لكل طبقة من التوجيه المتداخل.

تطبيق تقنيات التوجيه بغض النظر عن Route مستوى الكائن التعشيش. تقنيات المعلمات تختلف في جانب واحد فقط. يمكن لطرق الأطفال الوصول إلى معلمات الوالدين فقط عبر ActivatedRoute.parent.params . تستهدف ActivatedRoute.params نفس المستوى من المسارات المتداخلة. هذا يستثني المسارات على مستوى الوالدين ومعلماتها.

حراس Route مناسبون بشكل خاص للتوجيه المتداخل. يمكن أن Route كائن Route واحد الوصول إلى جميع مساراتها المتداخلة (الفرعية).

طرق حراسة

غالبًا ما تتكون تطبيقات الويب من بيانات عامة وخاصة. يميل كلا النوعين من البيانات إلى أن يكون لهما صفحات خاصة بهما مع طرق حراسة . هذه المسارات تسمح / تقييد الوصول اعتمادا على امتيازات المستخدم. قد يتفاعل المستخدمون غير المصرح لهم مع مسار حذر. يجب أن يمنع المسار المستخدم إذا حاول الوصول إلى محتواه الموجّه.

يوفر Angular حزمة من حراس المصادقة التي يمكن إرفاقها بأي مسار. يتم تشغيل هذه الطرق تلقائيًا اعتمادًا على كيفية تفاعل المستخدم مع المسار المحمي.

  • canActivate(...) - حرائق عندما يحاول المستخدم الوصول إلى الطريق

  • canActivateChild(...) - حرائق عندما يحاول المستخدم الوصول إلى المسارات المتداخلة (التابعة) canActivateChild(...)

  • canDeactivate(...) - حرائق عندما يحاول المستخدم ترك الطريق

تتوفر طرق الحراسة في Angular من @angular/router . لمساعدتهم على المصادقة ، يمكنهم اختيار بعض المعلمات بشكل اختياري. هذه المعلمات لا يحقن عن طريق حقن التبعية. تحت غطاء محرك السيارة ، يتم تمرير كل قيمة كوسيطة لأسلوب الحارس المستدعي.

  • ActivatedRouteSnapshot - متاح لجميع الثلاثة

  • RouterStateSnapshot - متاح لجميع الثلاثة

  • Component - متاح لل canDeactivate(...)

يوفر ActivatedRouteSnapshot الوصول إلى معلمات المسار للمسار الذي يخضع لحراسة. يعرض RouterStateSnapshot عنوان RouterStateSnapshot URL (محدد موقع الموارد الموحد) المطابق للمسار. Component مراجع عنصر صادر عن الطريق.

لحراسة الطريق ، يجب أن تكون هناك فئة تستخدم أساليب الحراسة كخدمة. خدمة يمكن أن تضخ في AppRoutingModule لحراسة لها Routes . قد حقن قيمة رمزية للخدمة في أي واحد Route الكائن.

`import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';

import { AuthService } from '../../services/auth.service'; import { UserService } from '../../services/user.service';

import { PrivateNestComponent } from '../../components/private-nest/private-nest.component'; import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component'; import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';

const routes: Routes = [ { path: 'private-nest', component: PrivateNestComponent, canActivate: [ AuthService ], // !!! canActivateChild: [ AuthService ], // !!! canDeactivate: [ AuthService ], // !!! children: [ { path: 'private-A', component: PrivateAComponent }, { path: 'private-B', component: PrivateBComponent } ] } ];

@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ], providers: [ AuthService, UserService ] }) export class AppRoutingModule { } `

canActivate و canActivateChild و يمكن canDeactivate التطبيق من AuthService. سيتم عرض تنفيذ الخدمة قريبًا مع تطبيق UserService.

يوفر UserService المعلومات اللازمة لمصادقة مستخدم. تنفيذ عمليات أسلوب الحراسة AuthService المصادقة. يجب أن تتضمن AppRoutingModule الخدمتين في مصفوفة موفري الخدمة. هذا هو حاقن الوحدة النمطية يعرف كيفية إنشاء لها.

توجد مسارات متداخلة الخروج من المسار /private-nest . يحتوي الكائن Route لـ /private-nest على بعض الحقول الجديدة. يجب أن تبدو أسمائهم مألوفة لأنها تعكس طرق الحراسة المقابلة لها.

يقوم كل حقل بإطلاق طريقة تنفيذ الاسم نفسه داخل الخدمة عند تشغيلها. يمكن لأي عدد من الخدمات تعبئة هذا الصفيف أيضًا. يتم اختبار طريقة تنفيذ كل خدمة. يجب عليهم إرجاع قيمة منطقية أو Observable تنبعث منها قيمة منطقية.

راجع تطبيقات AuthService و UserService أدناه.

`// user.service.ts

import { Injectable } from '@angular/core'; import { Router } from '@angular/router';

class TheUser { constructor(public isLoggedIn: boolean = false) { }

toggleLogin() { this.isLoggedIn = true; }

toggleLogout() { this.isLoggedIn = false; } }

const globalUser = new TheUser();

@Injectable({ providedIn: 'root' }) export class UserService { theUser: TheUser = globalUser;

constructor(private router: Router) { }

get isLoggedIn() { return this.theUser.isLoggedIn; }

login() { this.theUser.toggleLogin(); }

logout() { this.theUser.toggleLogout(); this.router.navigate(['/']); } } `

يتم تمرير المثيل نفسه من TheUser مع كل إنشاء مثيل لـ UserService. يوفر TheUser الوصول إلى isLoggedIn لتحديد حالة تسجيل دخول المستخدم. تسمح أساليب عامة أخرى اثنين UserService تبديل قيمة isLoggedIn . هذا هو أنه يمكن للمستخدم تسجيل الدخول والخروج.

يمكنك التفكير في TheUser كمثال عالمي. يعد UserService واجهة UserService تقوم بتكوين هذا العمومية. TheUser التغييرات على TheUser من UserService إنشاء UserService واحدة على كل مثيل خدمة UserService الأخرى. ينفذ UserService إلى AuthService لتوفير الوصول إلى isLoggedIn من TheUser للمصادقة.

`import { Component, Injectable } from '@angular/core'; import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

import { UserService } from './user.service';

@Injectable({ providedIn: 'root' }) export class AuthService implements CanActivate, CanActivateChild, CanDeactivate { constructor(private user: UserService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (this.user.isLoggedIn) return true; else return false; }

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.canActivate(route, state); }

canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { if (!this.user.isLoggedIn || window.confirm('Leave the nest?')) return true; else return false; } } `

تنفذ AuthService كل أسلوب حراسة مستورد من @angular/router . تحدد كل طريقة حراسة إلى حقل مناظر في كائن Route PrivateNestComponent. مثيل instantService instantiates من منشئ AuthService. تحدد AuthService إذا كان يمكن للمستخدم المتابعة باستخدام isLoggedIn المكشوفة بواسطة UserService.

يؤدي إرجاع false من حارس إلى توجيه المسار لحظر المستخدم من التوجيه. تسمح قيمة إرجاع true للمستخدم بالمضي إلى وجهة مساره. إذا تمت مصادقة أكثر من خدمة واحدة ، فيجب أن يتم إرجاعها كلها إلى السماح بالوصول. canActivateChild حراس مسارات الطفل من PrivateNestComponent. هذه الطريقة حارس حسابات للمستخدمين تجاوز PrivateNestComponent من خلال شريط العنوان.

معلمات طريقة الحرس تمر تلقائيا عند الاحتجاج. في حين أن المثال لا يستخدمها ، إلا أنها توفر معلومات مفيدة من الطريق. يمكن للمطور استخدام هذه المعلومات للمساعدة في مصادقة المستخدم.

AppComponent أيضا instantiates UserService للاستخدام المباشر في القالب الخاص به. مرجع إنشاء مثيل UserService من AppComponent و AuthService نفس فئة المستخدم ( TheUser ).

``import { Component } from '@angular/core';

import { UserService } from './services/user.service';

@Component({ selector: 'app-root', template: `

  • Enter the secret nest!
  • Leave the secret nest!
  • LOGOUT
  • LOGIN
` }) export class AppComponent { constructor(private user: UserService) { } } ``

يعالج UserService كافة منطق AppComponent. AppComponent في الغالب يتعامل مع قالبها. يتم إنشاء UserService user من مُنشئ الفئة. تحدد بيانات user وظيفة القالب.

استنتاج

يوجّه التوجيه توازنًا دقيقًا بين تنظيم أقسام التطبيق وتقييدها. قد لا يتطلب تطبيق أصغر مثل مدونة أو صفحة تقديس أي توجيه. حتى ذلك الحين ، بما في ذلك القليل من التوجيه البعثرة لا يمكن أن يضر. قد يرغب المستخدم فقط في الإشارة إلى جزء من الصفحة بعد كل شيء.

يطبق Angular مكتبة التوجيه الخاصة به والمبنية على واجهة برمجة تطبيقات سجل HTML5. يلغي API هذا التوجيه التجزئة بدلاً من استخدام pushState(...) و replaceState(...) . يقومون بتغيير عنوان URL لعنوان الويب دون تحديث الصفحة. تعمل إستراتيجية توجيه موقع المسار الافتراضي في Angular على هذا النحو. RouterModule.forRoot(routes, { useHash: true }) إعداد RouterModule.forRoot(routes, { useHash: true }) توجيه التجزئة إذا كان مفضلاً.

هذه المقالة تركز على استراتيجية الموقع المسار الافتراضي. بغض النظر عن الاستراتيجية ، تتوفر العديد من أدوات التوجيه لتوجيه تطبيق ما. يعرض RouterModule هذه الأدوات المساعدة من خلال صادراتها. المسارات الأساسية ، المعلمات ، المتداخلة ، والحراسة كلها ممكنة باستخدام RouterModule. للحصول على تطبيقات أكثر تقدمًا بما في ذلك المسارات المحملة بطبقة ، اطلع على الروابط أدناه.

مصادر

مصادر