Metadatos de ruta: Router por Before Semicolon

Metadatos de ruta

Puede adjuntar metadatos personalizados (como diseños de página, rutas de navegación, permisos o roles de acceso) al registrar rutas.

Los metadatos se almacenan según el patrón de ruta registrado. Utilice el mismo patrón al llamar a getRouteMeta.

Adjuntar metadatos

Pase metadatos dentro de la configuración de opciones de registerRoute:

javascript
import { registerRoute } from '@beforesemicolon/router'

registerRoute('/admin/:section', {
    exact: true,
    meta: {
        title: 'Admin Console',
        requiresAuth: true,
        allowedRoles: ['admin', 'moderator'],
        breadcrumb: 'Home > Admin > Dashboard',
    },
})

Recuperando metadatos (`getRouteMeta`)

Recupera el objeto de metadatos asociado con un patrón de ruta registrado.

typescript
function getRouteMeta(pattern: string): RouteMeta | undefined

Ejemplo

javascript
import { getRouteMeta } from '@beforesemicolon/router'

const meta = getRouteMeta('/admin/:section')
console.log(meta.title) // "Admin Console"
console.log(meta.requiresAuth) // true

Casos de uso comunes

1. Títulos de documentos dinámicos

Actualice el título del documento del navegador dinámicamente tras las transiciones de página:

javascript
import { onPage, getRouteMeta } from '@beforesemicolon/router'

onPage('/admin/:section', (active) => {
    if (active) {
        const meta = getRouteMeta('/admin/:section')
        document.title = meta?.title
            ? `${meta.title} | My App`
            : 'Admin | My App'
    }
})

2. Permisos de protección

Verifique los permisos dinámicamente dentro de un guardia de ruta:

javascript
import { registerRouteGuard, getRouteMeta } from '@beforesemicolon/router'

registerRouteGuard('/admin/:section', () => {
    const meta = getRouteMeta('/admin/:section')

    if (meta?.requiresAuth && !userIsLoggedIn()) {
        return '/login' // Redirect
    }

    if (meta?.allowedRoles && !userHasRoles(meta.allowedRoles)) {
        return '/unauthorized' // Redirect
    }

    return true // Allow
})

editar este documento