مسیریابی
مسیریابی Ecme از کنوانسیونهای مسیریابی Next.js App Router پیروی میکند، از یک سیستم مسیریابی مبتنی بر فایل استفاده میکند که هر فایل در دایرکتوری /app به یک مسیر در اپلیکیشن شما مربوط میشود. زیردایرکتوریها نمایانگر مسیرهای تودرتو هستند، که ساختار کردن ناوبری پیچیده را آسان میکند.
برای اطلاعات مفصل و مفاهیم درباره مسیریابی Next.js App Router، لطفا به مستنداتمراجعه کنید.
پیکربندی مسیر
اگرچه Next.js یک سیستم مسیریابی قدرتمند و قوی از جعبه خارج میدهد، اما تمپلیت ما یک لایه اضافی از پیکربندی مسیریابی را معرفی میکند. این رویکرد به ما اجازه میدهد تا رفتار هر صفحه را در حالی که انعطافپذیری و مقیاسپذیری را حفظ میکند، گسترش و سفارشی کنیم.
پیکربندی مسیریابی برای تمپلیت در src/configs/routes.config/index.ts یافت میشود. سه گروه اصلی از مسیرها وجود دارد:
export const publicRoutes = [
...
]
export const protectedRoutes = [
...
]
export const authRoutes = [
...
]
- publicRoutes:
این گروه شامل همه مسیرهایی است که برای همه کاربران قابل دسترسی هستند.
- protectedRoutes:
این گروه مسیرهایی را که برای دسترسی به آنها احتیاج به احراز هویت دارند، در بر میگیرد.
- authRoutes:
این گروه پیکربندی مسیرهایی را که مربوط به فرآیندهای ورود، ثبت نام و احراز هویت هستند، مدیریت میکند.
ساختار پیکربندی
پیکربندی مسیریابی سفارشی ما یک راه ساختاریافته برای تعریف و گسترش رفتار هر مسیر در اپلیکیشن را معرفی میکند. اینجا یک تجزیه از ساختار پیکربندی است:
export const protectedRoutes = {
'/articles': {
key: 'articles',
authority: [ADMIN, USER],
meta: {
pageContainerType: 'contained',
},
},
'/articles/[slug]': {
key: 'articles.articleDetails',
authority: [ADMIN, USER],
meta: {
pageContainerType: 'contained',
},
dynamicRoute: true
},
}اجزای اصلی پیکربندی:
کلیدهای مسیر (مچرها):
هر کلید در شیءroutes(برای مثال،'/articles','/articles/[slug]') به عنوان یک مچر مسیر برای URL فعلی عمل میکند. هنگامی که کاربر به یک صفحه میرود، اپلیکیشن URL را با کلیدهای مسیر در پیکربندی مقایسه میکند. یکبار که یک تطابق پیدا شد، دادههای مسیر مربوطه را از شیء پیکربندی بازیابی میکند و تنظیمات تعریف شده را اعمال میکند.برای مثال:
'/articles'یک مسیر استاتیک را تطابق میدهد.'/articles/[slug]'یک مسیر دینامیک را تطابق میدهد، جایی که[slug]جایگزین با مقدار دینامیک واقعی از URL میشود.
شیء پیکربندی:
هر کلید مسیر به یک شیء پیکربندی حاوی خواص زیر نقشه میشود:- key:
یک شناساگر برای مسیر که با پیکربندی ناوبری جفت میشود. - authority:
یک آرایه از نقشها (برای مثال،[ADMIN, USER]) که مشخص میکند کدام نقشهای کاربر اجازه دسترسی به مسیر را دارند. این کنترل دسترسی بر اساس نقش (RBAC) را پیادهسازی میکند. - meta:
متادیتا برای مسیر، گزینههای سفارشی بیشتر را فراهم میکند: - dynamicRoute:
یک پرچم بولین که نشان میدهد آیا مسیر دینامیک است (یعنی حاوی جایگزین پارامتر[slug]است).
- key:
اختیار
مسیرهای Ecme از کنترل دسترسی ساده بر اساس نقش پشتیبانی میکنند. میتوانید نقشهایی را که به یک مسیر دسترسی دارند، با استفاده از فیلد authority مشخص کنید. برای مثال، مسیر زیر فقط برای کاربران با نقشهای 'admin' یا 'user' قابل دسترسی است. اگر فیلد authority به عنوان یک آرایه خالی باقی بماند، مسیر برای همه نقشها باز خواهد بود.
export const protectedRoutes = [
{
...
authority: ['admin', 'user'],
},
]البته مدل اختیار انعطافپذیر است و میتواند برای برآوردن الزامات خاص پروژه تغییر کند. میتوانید آن را برای截ع دسترسی کاربر در سطح میانی سرور یا مستقیماً در سطح کلاینت برای کنترل بیشتر پیکربندی کنید.
متا
فیلد meta به شما اجازه میدهد تا اطلاعات اضافی را به PageContainer یا کامپوننت نمایشی مرتبط با مسیر منتقل کنید.
export const protectedRoutes = [
{
...
meta: {
pageContainerType: 'gutter',
header: {
title: 'My tittle',
description: 'Some description'
contained: false,
extraHeader: lazy(() => import('@/components/SomeComponent')),
},
footer: false,
layout: 'blank',
}
},
]چیدمان قادر خواهد بود به همه دادههای meta مشخص شده دسترسی داشته باشد.
| properties | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| pageContainerType | نوع حاوی نمایش را تعریف میکند | 'default' | 'gutterless' | 'contained' | 'default' |
| pageBackgroundType | نوع پسزمینه صفحه را تعریف میکند | 'default' | 'plain' | - |
| header | سربرگ صفحه و پیکربندی بیشتر را مشخص میکند | {
title?: string | ReactNode | LazyExoticComponent<() => JSX.Element>
description?: string | ReactNode
contained?: boolean
extraHeader?: string | ReactNode | LazyExoticComponent<() => JSX.Element>
} | - |
| footer | تعیین میکند آیا پاورقی نمایش داده شود یا نه | boolean | true |
| layout | چیدمان فعلی برای این صفحه را بازنویسی میکند | 'blank' | 'collapsibleSide' | 'stackedSide' | 'topBarClassic' | 'framelessSide' | 'contentOverlay' | - |