Vue Academy · درس

حراس التنقل

احمِ المسارات وشغّل المنطق أثناء التنقل باستخدام الحراس

حراس التنقل درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

ما هي حراس التنقل؟

تتيح حراس التنقل تشغيل تعليمات برمجية قبل تغيّر المسار أو أثناءه أو بعده.

حظر التنقل أو إعادة توجيهه
التحقق من المصادقة
التأكيد قبل مغادرة الصفحة

أنواع الحراس

هناك ثلاثة مستويات من الحراس:

تعمل الحراس العالمية مع كل عملية تنقل
تعمل الحراس الخاصة بالمسار لمسار محدد واحد
تعمل الحراس داخل المكون من داخل أحد المكونات

حارس beforeEach العالمي

تعمل router.beforeEach قبل كل عملية تنقل. وتتلقى المسار الهدف والمسار الحالي.

router.beforeEach((to, from) => {
  console.log("going to", to.path)
  // return true to allow,
  // or a route to redirect
})

السماح بإعادة التوجيه أو تنفيذها

في Vue Router 4، أعد قيمة للتحكم في التدفق.

أعد true أو لا تُعد أي قيمة للسماح
أعد false للإلغاء
أعد موقع مسار لإعادة التوجيه

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    return { name: "login" }
  }
  return true
})

حقول meta للمسارات

أرفق بيانات meta مخصصة بالمسارات، مثل requiresAuth، واقرأها داخل الحراس.

const routes = [
  {
    path: "/dashboard",
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]

حارس للمصادقة

نمط شائع: احمِ المسارات من خلال التحقق من المصادقة في حارس عالمي.

router.beforeEach((to) => {
  const authed = localStorage.getItem("token")
  if (to.meta.requiresAuth && !authed) {
    return { name: "login", query: { redirect: to.fullPath } }
  }
})

beforeEnter الخاص بالمسار

يحرس beforeEnter مسارًا واحدًا مباشرةً ضمن تعريفه.

const routes = [
  {
    path: "/admin",
    component: Admin,
    beforeEnter: (to, from) => {
      return isAdmin() ? true : { name: "home" }
    }
  }
]

الحراس داخل المكونات

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

import { onBeforeRouteLeave } from "vue-router"

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    return window.confirm("Leave without saving?")
  }
})

onBeforeRouteUpdate

تعمل onBeforeRouteUpdate عندما يتغير المسار، مع إعادة استخدام المكون نفسه، مثلًا عند تغيّر المعامل.

import { onBeforeRouteUpdate } from "vue-router"

onBeforeRouteUpdate((to) => {
  loadUser(to.params.id)
})

دالة رد النداء next (الأسلوب الكلاسيكي)

يستخدم الكود الأقدم وسيطًا ثالثًا هو next للتحكم في التنقل. أما الآن، فيُفضّل إرجاع قيمة.

// Classic style with next()
router.beforeEach((to, from, next) => {
  if (canAccess(to)) {
    next()         // proceed
  } else {
    next("/login") // redirect
  }
})

القيمة المُعادة في مقابل next()

أسلوبان لهدف واحد:

إرجاع قيمة (حديث وأنظف): true أو false أو موقع مسار
استدعاء next() (كلاسيكي): المتابعة أو إعادة التوجيه

لا تخلط بين الأسلوبين في الحارس نفسه. يُوصى بأسلوب الإرجاع في الكود الجديد.

تحقق سريع

اختبر مدى فهمك لحراس التنقل.

مراجعة: حراس التنقل

تعلّمت كيفية التحكم في التنقل:

يعمل الحارس العالمي beforeEach مع كل مسار
أعد true للسماح، أو false للإلغاء، أو موقعًا لإعادة التوجيه
توجّه حقول meta مثل requiresAuth عمليات التحقق من المصادقة
يحرس beforeEnter مسارًا واحدًا
تتعامل الحراس داخل المكونات، مثل onBeforeRouteLeave، مع مغادرة المسار

لقد أتممت دورة Vue.js التأسيسية!

الأسئلة الشائعة

هل درس «حراس التنقل» مجاني؟

نعم — نص درس «حراس التنقل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «حراس التنقل»؟

احمِ المسارات وشغّل المنطق أثناء التنقل باستخدام الحراس تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «حراس التنقل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy