Route Lifecycle Hooks (Activation, Deactivation)

Aurelia-এ রাউটিং ব্যবস্থাপনাটি শক্তিশালী এবং ফ্লেক্সিবল। রাউটের সাথে সম্পর্কিত Lifecycle Hooks ডেভেলপারদের জন্য রাউট সেশন পরিচালনা করার সময় বিভিন্ন কাস্টম কার্যক্রম চালানোর সুযোগ প্রদান করে। Route Lifecycle Hooks দুটি প্রধান মেথড দিয়ে গঠিত: Activation এবং Deactivation।

এই মেথডগুলো রাউটের সময় কোনো কম্পোনেন্ট বা পেজ অ্যাকটিভেট এবং ডিএকটিভেট হওয়ার সময়ে কার্যক্রম চালানোর জন্য ব্যবহৃত হয়। এই hooks গুলি সাধারণত রাউট গার্ড, ডেটা ফেচিং, ক্লিনআপ এবং অ্যাপ্লিকেশন ফ্লো নিয়ন্ত্রণ করার জন্য ব্যবহার করা হয়।

১. canActivate() (Activation Hook)

canActivate() মেথডটি Route Guard হিসেবে ব্যবহৃত হয়, যা রাউটটি অ্যাকটিভেট করার আগে কল হয়। এটি রাউটটি সফলভাবে প্রবেশযোগ্য কিনা তা যাচাই করে। যদি canActivate() false রিটার্ন করে, তবে রাউটটি অ্যাকটিভ হবে না এবং ব্যবহারকারী রাউট থেকে ফিরে আসবে।

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট স্যুইচ হয় এবং নতুন রাউট অ্যাকটিভেট করার আগে।
• কিভাবে ব্যবহৃত হয়: আপনি যদি কোনো রাউটে প্রবেশের জন্য অথেনটিকেশন বা শর্তাবলী যাচাই করতে চান, তবে canActivate() ব্যবহার করবেন।

উদাহরণ:

export class MyComponent {
  canActivate() {
    let userAuthenticated = false; // ব্যবহারকারীর অথেনটিকেশন চেক করুন
    if (!userAuthenticated) {
      console.log('Access Denied');
      return false;  // রাউট অ্যাকটিভেট হবে না
    }
    return true; // রাউট অ্যাকটিভেট হবে
  }
}

২. activate() (Activation Hook)

activate() মেথডটি canActivate() এর সফল প্রস্থান পরবর্তী সময়ে কল হয়। এটি ব্যবহারকারীর জন্য ডেটা লোড, অথবা কোনও নির্দিষ্ট কার্যক্রম শুরু করার জন্য ব্যবহৃত হয়।

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট অ্যাকটিভ হয় এবং রাউট মডিউল লোড হয়।
• কিভাবে ব্যবহৃত হয়: রাউট অ্যাকটিভেট করার পর ডেটা লোড করতে বা ইনিশিয়ালাইজ করতে activate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  activate(params) {
    console.log('Component Activated');
    // ডেটা লোড বা অন্য কোনো প্রস্তুতিমূলক কাজ করতে পারেন
    this.loadData(params.id);
  }

  loadData(id) {
    // ডেটা ফেচ করা
    console.log(`Fetching data for ID: ${id}`);
  }
}

৩. canDeactivate() (Deactivation Hook)

canDeactivate() মেথডটি রাউটটি ডিএকটিভেট করার আগে কল হয়। এটি নিশ্চিত করে যে ব্যবহারকারী যদি কোনো গুরুত্বপূর্ণ কাজ (যেমন ফর্ম পূর্ণ করা) করেন এবং সেই কাজ সেভ না করে রাউট পরিবর্তন করেন, তবে আপনাকে সতর্ক করতে পারবে। এটি সাধারণত রাউট ড্যামেজ বা অব্যবহৃত ডেটা ফিচার করার জন্য ব্যবহৃত হয়।

কিভাবে কাজ করে:

• কখন কল হয়: যখন রাউট ডিএকটিভেট হয়, অর্থাৎ কম্পোনেন্টটি বা পেজটি সরানো হবে।
• কিভাবে ব্যবহৃত হয়: ডেটা বা ফর্মের অবস্থা সেভ না হলে ব্যবহারকারীকে সাবধান করার জন্য canDeactivate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  canDeactivate() {
    let formUnsaved = true; // ফর্মে সেভ না করা ডেটা চেক করুন
    if (formUnsaved) {
      return confirm('You have unsaved changes. Are you sure you want to leave?');
    }
    return true;
  }
}

৪. deactivate() (Deactivation Hook)

deactivate() মেথডটি canDeactivate() এর পর কল হয় এবং এটি রাউট থেকে সরানোর আগে কোনো ক্লিনআপ কার্যক্রম পরিচালনা করতে ব্যবহৃত হয়। এটি সাধারণত ফর্ম ডেটা ফ্রেশ করা, ইভেন্ট লিসেনার অপসারণ, অথবা টাইমার বন্ধ করার জন্য ব্যবহৃত হয়।

কিভাবে কাজ করে:

• কখন কল হয়: যখন কম্পোনেন্টটি বা পেজটি ডিএকটিভেট হয়ে যাচ্ছে, তখন কোনো ক্লিনআপ কার্যক্রম করার জন্য।
• কিভাবে ব্যবহৃত হয়: DOM থেকে সরানোর আগে রিসোর্স বা অবস্থা মুছে ফেলতে deactivate() ব্যবহার করা হয়।

উদাহরণ:

export class MyComponent {
  deactivate() {
    console.log('Cleaning up resources...');
    // কিছু ক্লিনআপ কার্যক্রম, যেমন ইভেন্ট লিসেনার বা টাইমার বন্ধ করা
  }
}

৫. Example of using Route Lifecycle Hooks

এখন, canActivate, activate, canDeactivate, এবং deactivate এর একটি বাস্তব উদাহরণ দেখা যাক:

export class UserProfile {
  // Activation Hook: Checks if the user can access the route
  canActivate() {
    let isAuthenticated = true;  // চেক করুন ব্যবহারকারী লগইন করেছে কিনা
    if (!isAuthenticated) {
      console.log('User not authenticated');
      return false;
    }
    return true;
  }

  // Activation Hook: Fetch data when the route is activated
  activate(params) {
    console.log(`Fetching profile data for user: ${params.userId}`);
    this.loadUserData(params.userId);
  }

  loadUserData(userId) {
    // ডেটা লোড করার জন্য API কল
    console.log(`Loading data for ${userId}`);
  }

  // Deactivation Hook: Confirm if the user wants to leave with unsaved changes
  canDeactivate() {
    let unsavedChanges = true;  // চেক করুন যদি ব্যবহারকারী কোনো পরিবর্তন না সেভ করে বেরিয়ে যেতে চান
    if (unsavedChanges) {
      return confirm('You have unsaved changes. Do you really want to leave?');
    }
    return true;
  }

  // Deactivation Hook: Cleanup when leaving the route
  deactivate() {
    console.log('Cleaning up resources for user profile');
  }
}

উপসংহার

Aurelia-এর Route Lifecycle Hooks (Activation এবং Deactivation) একটি গুরুত্বপূর্ণ ভূমিকা পালন করে অ্যাপ্লিকেশনের রাউটিং সিস্টেমের মধ্যে কার্যকরী ও মডুলার কার্যক্রম পরিচালনা করতে। এগুলি ডেটা লোড, রাউট গার্ড, ক্লিনআপ এবং ডেভেলপারদের জন্য অন্যান্য কার্যক্রম চালানোর জন্য ব্যবহৃত হয়। canActivate(), activate(), canDeactivate(), এবং deactivate() মেথডগুলোকে চমৎকারভাবে ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের রাউটিং ফ্লো কাস্টমাইজ করতে পারবেন।