Angular 2: Secure Route Navigation

في Angular 2، تتيح لك خاصية الـ Guards القدرة على تحكم دقيق في عملية توجيه المستخدمين إلى المسارات المناسبة بناءً على معايير معينة، مثل حالة تسجيل الدخول. واحدة من أنواع الـ Guards التي يمكن استخدامها هي الـ CanActivate، والتي تتيح لك فحص ما إذا كان بإمكان المستخدم الوصول إلى مسار معين أم لا.

في حالتك، تريد منع المستخدمين المتصلين من الوصول إلى مسار معين (مثل “login” و “home”) بعد تسجيل الدخول، حيث يجب أن يتم توجيههم فورًا إلى صفحة أخرى إذا حاولوا الوصول إليها. لتحقيق هذا، يمكنك استخدام Guards المخصصة لكل مسار بشكل منفصل.

لنبدأ بتحقيق هذا الهدف. يجب عليك أولاً إنشاء حارس (Guard) جديد يتحقق مما إذا كان المستخدم قد سجل الدخول أم لا. ثم، قم بتطبيق هذا الحارس على كل مسار يجب أن يكون متاحًا للمستخدمين المتصلين فقط. لنقم بتطبيق هذا في الكود:

typescriptCopy code
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    this.router.navigateByUrl('/login');
    return false;
  }
}

في الكود أعلاه، تم إنشاء حارس جديد يُسمى “AuthGuard”. يتم تحقق فيه مما إذا كان المستخدم مسجل الدخول باستخدام خدمة الـ AuthService. إذا كان المستخدم مسجل الدخول، يتم السماح له بالوصول، أما إذا لم يكن مسجل الدخول، فسيتم توجيهه إلى صفحة تسجيل الدخول.

الآن، يمكنك استخدام هذا الحارس في تكوين الطرق في التطبيق. تأكد من تطبيقه على الطرق التي تريد حمايتها. لتحقيق ذلك، يمكنك تحديد الحارس كـ CanActivate في تكوين الطرق كما يلي:

typescriptCopy code
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from './login.component';
import { AboutComponent } from './about.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', redirectTo: '' } // يُعالج الطرق التي لا تتطابق مع أي مسار آخر
];

export const routing = RouterModule.forRoot(routes);

في الكود أعلاه، تم تطبيق الحارس “AuthGuard” على المسار “dashboard” باستخدام الخاصية “canActivate”. هذا يعني أنه فقط المستخدمون المسجلون يمكنهم الوصول إلى هذا المسار. بينما يمكن لغير المستخدمين الوصول إلى المسارات الأخرى مثل “login” و “home” و “about”.

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

بالطبع، هناك بعض المعلومات الإضافية التي يمكن توفيرها لتعميق فهمك لكيفية تنفيذ هذه الوظيفة بشكل أفضل:

1. خدمة المصادقة (AuthService): في الكود السابق، تم استخدام خدمة الـ AuthService لفحص ما إذا كان المستخدم قد سجل الدخول أم لا. يمكن أن تكون هذه الخدمة مسؤولة عن تخزين معلومات تسجيل الدخول الخاصة بالمستخدم، مثل الجلسة أو الرمز المميز (token)، وتوفير وظائف لتسجيل الدخول وتسجيل الخروج.

2. التوجيه (Routing): في Angular، يتم استخدام التوجيه لتحديد كيفية توجيه المستخدمين إلى مكونات الواجهة الخاصة بالتطبيق على أساس الرابط الذي يطلبونه. في الكود السابق، تم تعريف مجموعة من الطرق (routes) التي تحدد كيفية التوجيه بين المكونات المختلفة، وتم استخدام Guards لتحديد من يمكن الوصول إلى كل مسار.

3. حارس (Guard): هو جزء من نظام التوجيه في Angular ويسمح بفحص ما إذا كان المستخدم مؤهلاً للوصول إلى مسار معين أم لا. في الكود السابق، تم استخدام حارس (AuthGuard) لتحقق من حالة تسجيل الدخول للمستخدم. يمكن أيضًا استخدام حواسب لتطبيق قواعد أمان أخرى مثل التحقق من الصلاحيات.

4. تسجيل الخروج (Logout): يجب أيضًا توفير وظيفة لتسجيل الخروج للمستخدمين بعد انتهاء جلسة العمل. يمكن أن تقوم خدمة الـ AuthService بتنفيذ هذه الوظيفة من خلال مسح المعلومات ذات الصلة مثل الجلسة أو الرمز المميز.

5. حماية البيانات الحساسة: في التطبيقات التي تتضمن معلومات حساسة، مثل بيانات المستخدم أو المعلومات المالية، يجب زيادة مستويات الأمان وتطبيق إجراءات حماية إضافية مثل التشفير والتوثيق المزدوج.

6. إدارة الجلسات (Session Management): تعتبر إدارة الجلسات جزءًا مهمًا من تطبيقات الويب التي تتضمن تسجيل الدخول، ويجب تنفيذها بعناية لضمان أمان المستخدم وحماية بياناته الشخصية.

7. استخدام نسخ Angular الأحدث: يُفضل استخدام أحدث إصدارات Angular حيث قد يتم تحسين وتوسيع ميزات الأمان والأداء، بالإضافة إلى دعم أحدث التقنيات والميزات.

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