Metadados de rota

Você pode associar metadados personalizados, como layouts de página, trilhas de navegação, permissões ou funções de acesso, ao registrar rotas.

Os metadados são armazenados pelo padrão da rota registrada. Use o mesmo padrão ao chamar getRouteMeta.

Associando metadados

Passe os metadados dentro das opções de configuração 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',
    },
})

Obtendo metadados (`getRouteMeta`)

Retorna o objeto de metadados associado a um padrão de caminho registrado.

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

Exemplo

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 comuns

1. Títulos dinâmicos do documento

Atualize o título do documento dinamicamente durante as transições 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. Protegendo permissões

Verifique permissões dinamicamente dentro de uma proteção de rota:

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