Vue Academy · درس

حقول Route Meta وكتابة أنواعها

‏meta: { requiresAuth: true }، ودمج التصريحات في TypeScript لكتابة أنواع meta

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

ما حقول البيانات الوصفية للمسار؟

يمكن لكل مسار أن يحمل كائن meta: وهي بيانات عشوائية مرفقة بالمسار. وتناسب تمامًا أعلامًا مثل متطلبات المصادقة، والأدوار المسموح بها، وعناوين الصفحات، أو خيارات التخطيط.

إضافة البيانات الوصفية إلى مسار

اضبطوا المفتاح meta في سجل المسار. وتعود القيم إليكم بالكامل.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }
  }
]

قراءة البيانات الوصفية في حارس

أكثر الاستخدامات شيوعًا يكون داخل حارس التنقل. يُشغّل router.beforeEach قبل كل عملية تنقل، ويتلقى المسار الهدف الذي يمكنكم فحص meta الخاص به.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // check login
  }
})

إعادة توجيه المستخدمين غير المصادق عليهم

أعيدوا موقع مسار من الحارس لإعادة التوجيه. يؤدي إرجاع false إلى إلغاء التنقل، بينما يسمح إرجاع لا شيء أو true بمتابعته.

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login' }
  }
})

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

ادمجوا حقل البيانات الوصفية roles مع دور المستخدم الحالي للتحكم في الوصول إلى الصفحات حسب الصلاحيات.

router.beforeEach((to) => {
  const auth = useAuthStore()
  const roles = to.meta.roles
  if (roles && !roles.includes(auth.role)) {
    return { path: '/forbidden' }
  }
})

تُدمج البيانات الوصفية من المسارات الأصلية

ترث المسارات المتداخلة البيانات الوصفية من مساراتها الأصلية عبر to.meta، الذي يدمج جميع السجلات المطابقة. يرى المسار الابن البيانات الوصفية للمسار الأب ما لم يتجاوز المفتاح نفسه.

مشكلة تحديد الأنواع

يحدد TypeScript نوع meta ككائن فارغ افتراضيًا، لذا يظهر خطأ عند استخدام to.meta.requiresAuth. يمكنكم إصلاح ذلك باستخدام دمج التصريحات مع أنواع Vue Router.

تعريف البيانات الوصفية ذات الأنواع

وسّعوا الواجهة RouteMeta من vue-router. ضعوا ذلك في ملف .d.ts أو في أي وحدة تحتوي على export {}.

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

export {}

أصبحت البيانات الوصفية خاضعة لفحص الأنواع

بعد التوسعة، يعرف المصرّف بنية meta. وسيكتشف أخطاء الكتابة مثل requireAuth، كما ستعمل الإكمالات التلقائية.

router.beforeEach((to) => {
  if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})

استخدام البيانات الوصفية في المكونات

داخل أحد المكونات، يمكنكم قراءة البيانات الوصفية للمسار الحالي عبر useRoute() — وهي أيضًا محددة الأنواع بفضل التوسعة.

import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuth

البيانات الوصفية لعناوين الصفحات

من الأنماط الشائعة: تخزين title في البيانات الوصفية، ثم ضبط document.title من حارس عام.

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title
})

اختبار سريع

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

خلاصة

تحمل حقول البيانات الوصفية للمسار بيانات خاصة بكل مسار:

عرّفوا البيانات الوصفية في سجلات المسارات (requiresAuth وroles وtitle).
اقرؤوها في router.beforeEach لحراسة التنقل.
تُدمج البيانات الوصفية من المسار الأب إلى المسار الابن.
حدّدوا نوعها باستخدام دمج التصريحات على RouteMeta من vue-router.

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

هل درس «حقول Route Meta وكتابة أنواعها» مجاني؟

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

ماذا ستتعلم في «حقول Route Meta وكتابة أنواعها»؟

‏meta: { requiresAuth: true }، ودمج التصريحات في TypeScript لكتابة أنواع meta تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «حقول Route Meta وكتابة أنواعها»؟

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

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

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

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

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