حماية المسارات والتحكم في صلاحيات الوصول باستخدام حراس المسارات الوظيفية

Access ControlAuthorizationCanActivateFnFunctional Route GuardsNavigation Interception

جدول مرجعي سريع

نمط الحراسة المعماري (`Guard Pattern`)	طريقة التكوين والتعريف البرمجي	طريقة الربط في مصفوفة المسارات
الحراس الكلاسيكيون القائمون على الكلاس (`Class-based`)	بناء كلاس ينفذ واجهة `CanActivate`	ربط معقد يتطلب تسجيل كلاس الحرس في مزودات النظام
الحراس الوظيفيون الحديثون (`Functional Guards`)	دالة بسيطة من نوع `CanActivateFn`	تمرير الدالة مباشرة داخل مصفوفة `canActivate: [authGuard]` بكل سهولة وسلاسة

الشرح

حماية بيانات التطبيق والتحكم في وصول المستخدمين للمسارات الحساسة (مثل لوحة الإدارة أو صفحات الملف الشخصي) يُعد ركيزة أساسية لأي نظام آمن. في معمارية Angular 22.1 الحديثة، تم الاستغناء عن كلاسات الحراس القديمة لصالح الحراس الوظيفيين (Functional Route Guards) النظيفة والمباشرة التي تُنفذ عبر دالة CanActivateFn.

تفصيل فلسفة وعمل الحراس الوظيفيين

المصادقة المبكرة للوصول:

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

التوجيه التلقائي عند رفض الصلاحية:

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

بناء وتكوين حرس وظيفي للأمان

المثال الأول: ملف الحرس الوظيفي للمصادقة (auth.guard.ts)

typescript

1	import { inject } from '@angular/core';
2	import { CanActivateFn, Router } from '@angular/router';
3
4	export const authGuard: CanActivateFn = (route, state) => {
5	const router = inject(Router);
6	const isAuthenticated = false; // محاكاة حالة مصادقة المستخدم
7
8	if (isAuthenticated) {
9	console.log('[Auth Guard] تم التحقق من الصلاحية بنجاح، السماح بالدخول للمسار.');
10	return true;
11	} else {
12	console.warn('[Auth Guard] عذراً، المستخدم غير مصرح له بالدخول. جاري التوجيه لتسجيل الدخول.');
13	// إعادة توجيه المستخدم لصفحة الدخول في حال رفض الصلاحية
14	return router.parseUrl('/login');
15	}
16	};

المثال الثاني: ربط الحرس بالمحور في ملف المسارات (app.routes.ts)

typescript

1	import { Routes } from '@angular/router';
2	import { authGuard } from './auth.guard';
3	import { DashboardComponent } from './dashboard.component';
4	import { LoginComponent } from './login.component';
5
6	export const routes: Routes = [
7	{ path: 'login', component: LoginComponent },
8	{
9	path: 'dashboard',
10	component: DashboardComponent,
11	// حماية المسار باستخدام الحرس الوظيفي الحديث
12	canActivate: [authGuard]
13	}
14	];

نصائح احترافية

—استخدم دالة inject() داخل الحراس الوظيفيين للوصول إلى الخدمات مثل Router أو خدمات المصادقة!
—هذه الطريقة النظيفة تغنيك عن كتابة مُنشئ كلاس معقد (Constructor Injection) وتجعل كتابة الحراس سريعة وخالية من التكرار.

الدرس السابق

تحسين الأداء عبر التحميل الكسول للمسار والمكوناتت

الدرس التالي

تمرير البيانات مسبقاً للمسارات وتحميلها قبل العرض باستخدام Route Resolvers

نمط الحراسة المعماري (`Guard Pattern`)

طريقة التكوين والتعريف البرمجي

طريقة الربط في مصفوفة المسارات

الحراس الكلاسيكيون القائمون على الكلاس (`Class-based`)

بناء كلاس ينفذ واجهة `CanActivate`

ربط معقد يتطلب تسجيل كلاس الحرس في مزودات النظام

الحراس الوظيفيون الحديثون (`Functional Guards`)

دالة بسيطة من نوع `CanActivateFn`

تمرير الدالة مباشرة داخل مصفوفة `canActivate: [authGuard]` بكل سهولة وسلاسة

تفصيل فلسفة وعمل الحراس الوظيفيين

المصادقة المبكرة للوصول:

التوجيه التلقائي عند رفض الصلاحية:

المثال الأول: ملف الحرس الوظيفي للمصادقة (auth.guard.ts)

typescript

1	import { inject } from '@angular/core';
2	import { CanActivateFn, Router } from '@angular/router';
3
4	export const authGuard: CanActivateFn = (route, state) => {
5	const router = inject(Router);
6	const isAuthenticated = false; // محاكاة حالة مصادقة المستخدم
7
8	if (isAuthenticated) {
9	console.log('[Auth Guard] تم التحقق من الصلاحية بنجاح، السماح بالدخول للمسار.');
10	return true;
11	} else {
12	console.warn('[Auth Guard] عذراً، المستخدم غير مصرح له بالدخول. جاري التوجيه لتسجيل الدخول.');
13	// إعادة توجيه المستخدم لصفحة الدخول في حال رفض الصلاحية
14	return router.parseUrl('/login');
15	}
16	};

المثال الثاني: ربط الحرس بالمحور في ملف المسارات (app.routes.ts)

typescript

1	import { Routes } from '@angular/router';
2	import { authGuard } from './auth.guard';
3	import { DashboardComponent } from './dashboard.component';
4	import { LoginComponent } from './login.component';
5
6	export const routes: Routes = [
7	{ path: 'login', component: LoginComponent },
8	{
9	path: 'dashboard',
10	component: DashboardComponent,
11	// حماية المسار باستخدام الحرس الوظيفي الحديث
12	canActivate: [authGuard]
13	}
14	];