Meta-поля маршрутов и доступ по ролям

↑ 5.1 Vue Router · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Декларативная конфигурация доступа к маршрутам и типизация meta.

Объяснение

Маршрут может нести произвольные данные в meta.

// Типизация
declare module "vue-router" {
  interface RouteMeta { requiresAuth?: boolean; roles?: string[]; title?: string; layout?: "default" | "blank"; keepAlive?: boolean }
}
 
const routes: RouteRecordRaw[] = [
  { path: "/login", component: LoginPage, meta: { layout: "blank", title: "Вход" } },
  {
    path: "/admin", component: AdminLayout, meta: { requiresAuth: true, roles: ["admin"] },
    children: [{ path: "users", component: UsersPage, meta: { title: "Пользователи" } }],
  },
];
 
// meta наследуется по вложенности: используйте matched
router.beforeEach((to) => {
  const needsAuth = to.matched.some(r => r.meta.requiresAuth);
  const roles = to.matched.flatMap(r => r.meta.roles ?? []);
  if (needsAuth && !auth.user) return { name: "login", query: { redirect: to.fullPath } };
  if (roles.length && !roles.some(r => auth.user?.roles.includes(r))) return { name: "forbidden" };
});

Применения meta:

Поле	Использование
requiresAuth, roles, permissions	доступ
title, breadcrumb	заголовок страницы и хлебные крошки
layout	выбор шаблона (<component :is> в App.vue)
keepAlive	кэширование страницы
transition	анимация перехода

ACL: вместо ролей лучше права (permissions): permissions: ["orders:read"]; роль → набор прав определяется на бэкенде. Меню генерируется из маршрутов (видимость по правам), кнопки — директивой v-can.

Динамические маршруты: после логина router.addRoute(...) только для доступных модулей (уменьшает бандл и раскрытие структуры).

Нюансы и подводные камни

• meta не наследуется автоматически в to.meta (в v4 «слито» из совпавших записей, но лучше использовать matched).
• Проверка ролей на клиенте — UX; сервер должен отклонять запросы.
• Хардкод строк ролей размазывается по проекту: соберите в константы/перечисление.
• Прямой заход по ссылке: пользователь ещё не загружен — дождитесь инициализации.

Практика

1. Типизируйте RouteMeta и настройте guard по matched.
2. Сгенерируйте меню из маршрутов с учётом прав.
3. Добавьте layout в meta и выбирайте шаблон в App.vue.

Вопросы с ответами

Как защитить группу маршрутов?

Указать meta.requiresAuth/roles на родителе и проверять to.matched в глобальном guard.

Роли или права?

Права (permissions) гибче: роли — набор прав, приложение проверяет конкретные права.

Связанные темы

• Navigation guards
• Lazy loading маршрутов