Métadonnées d'itinéraire

Vous pouvez joindre des métadonnées personnalisées (telles que des mises en page, des fils d'Ariane, des autorisations ou des rôles d'accès) lors de l'enregistrement des itinéraires.

Les métadonnées sont stockées par le modèle d'itinéraire enregistré. Utilisez le même modèle lors de l’appel de getRouteMeta.

Joindre des métadonnées

Transmettez les métadonnées dans la configuration des options 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',
    },
})

Récupération de métadonnées (`getRouteMeta`)

Récupère l'objet de métadonnées associé à un modèle de chemin enregistré.

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

Exemple

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

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

Cas d'utilisation courants

1. Titres de documents dynamiques

Mettez à jour le titre du document du navigateur de manière dynamique lors des transitions de page :

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. Garder les autorisations

Vérifiez les autorisations de manière dynamique à l'intérieur d'un garde-route :

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
})

modifier ce document