حل مشكلة الحصول على المسار الحالي في Angular

في مشروعك، تقوم بإنشاء حارس الوصول (AccessGuard) الذي يحدد ما إذا كان بإمكان المستخدم الوصول إلى المسار المعني أم لا. للقيام بذلك، استخدمت خاصية router.url للحصول على المسار الحالي، ولكنك واجهت مشكلة حيث أن العنوان الذي يتم إرجاعه يكون للمسار السابق قبل التنقل إلى المسار الجديد.

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

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

تعاني من مشكلة في استخدام خاصية router.url حيث أنها تُرجع المسار السابق بدلاً من المسار الحالي الذي يتم التنقل إليه. لتجاوز هذه المشكلة، يمكنك استخدام Observable من Angular للحصول على المسار الحالي بشكل صحيح.

يمكنك تحقيق ذلك عن طريق استخدام الدالة router.events والتي ترصد جميع الأحداث المتعلقة بالتنقل. وعندما يتم تغيير المسار، يمكنك الحصول على المسار الجديد باستخدام مرشح filter لتصفية الأحداث والحصول على الأحداث ذات النوع NavigationEnd التي تمثل انتهاء التنقل. ثم يمكنك استخدام خاصية url في الحدث المرتبط بالتنقل الجديد للحصول على المسار الحالي بشكل صحيح.

فيما يلي كود يوضح كيفية تطبيق هذه الفكرة:

typescriptCopy code
import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AccessGuard implements CanActivate, CanActivateChild {

  permissions: any[];
  currentRoute: string;

  constructor(private authService: AuthService, private router: Router) {
    this.permissions = this.authService.getPermissions();

    // Subscribe to router events to get the current route
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.currentRoute = event.url;
    });
  }

  canActivate() {
    return this.checkHavePermission();
  }

  canActivateChild() {
    return this.checkHavePermission();
  }

  private checkHavePermission() {
    switch (this.currentRoute) {
      case "/panel/users":
        return this.getPermission('user.view');
      case '/panel/dashboard':
        return true;
      case '/panel/candidates':
        return this.getPermission('candidate.view');
      default:
        return true;
    }
  }

  getPermission(perm) {
    for (let i = 0; i < this.permissions.length; i++) {
      if (this.permissions[i].name === perm) {
        return true;
      }
    }
    return false;
  }

}

باستخدام هذا الكود، يتم الآن الحصول على المسار الحالي بشكل صحيح وتقديمه إلى checkHavePermission لفحص صلاحيات المستخدم بناءً عليه. هذا يحل المشكلة التي واجهتها في استخدام router.url.

بالطبع، ها هو الاستكمال:

باستخدام هذا الكود، يتم الآن الحصول على المسار الحالي بشكل صحيح وتقديمه إلى checkHavePermission() لفحص صلاحيات المستخدم بناءً عليه. هذا يحل المشكلة التي واجهتها في استخدام router.url.

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

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

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

باختصار، باستخدام الحلول المبتكرة مثل استخدام router.events، يمكنك تجنب المشاكل المحتملة وتحسين أداء وفعالية حارس الوصول الخاص بك وبناء تطبيق Angular قوي وموثوق به.