Navigation guards

Навигационные охранники являются ключевым инструментом для управления доступом к маршрутам в приложениях на базе Quasar и Vue Router. Они позволяют выполнять проверку состояния приложения, авторизации пользователя, предзагрузку данных и другие операции до того, как маршрут будет активирован.

Виды навигационных охранников

  1. Глобальные охранники (Global Guards) Эти охранники применяются ко всем маршрутам приложения и задаются при конфигурации маршрутизатора.

    • beforeEach Вызывается перед каждым переходом на новый маршрут. Позволяет отменить или перенаправить переход.

      import { route } from 'quasar/wrappers';
import { createRouter, createMemoryHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createMemoryHistory(),
  routes
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // логика проверки авторизации
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' });
  } else {
    next();
  }
});

export default router;

    • beforeResolve Срабатывает после beforeEach, но перед подтверждением перехода. Часто используется для асинхронной загрузки данных.

    • afterEach Вызывается после завершения перехода. Не принимает next() и используется для логирования или аналитики.

      router.afterEach((to, from) => {
  console.log(`Переход с ${from.fullPath} на ${to.fullPath}`);
});

  2. Охранники маршрута (Route Guards) Определяются непосредственно в конфигурации маршрута через свойства beforeEnter. Применяются только к конкретному маршруту.

    {
  path: '/dashboard',
  component: () => import('pages/Dashboard.vue'),
  beforeEnter: (to, from, next) => {
    const hasAccess = true; // логика проверки доступа
    if (hasAccess) {
      next();
    } else {
      next({ name: 'home' });
    }
  }
}

  3. Охранники компонента (In-Component Guards) Определяются внутри компонентов и управляют переходом при активном компоненте. Существуют три основных метода:

    • beforeRouteEnter Вызывается перед рендерингом компонента. Не имеет доступа к this, поэтому для работы с экземпляром компонента используют колбэк:

      beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.loadData();
  });
}

    • beforeRouteUpdate Срабатывает при переходе на тот же компонент с другим маршрутом (например, изменение параметра):

      beforeRouteUpdate(to, from, next) {
  this.fetchData(to.params.id);
  next();
}

    • beforeRouteLeave Позволяет контролировать выход из компонента:

      beforeRouteLeave(to, from, next) {
  const answer = window.confirm('Вы уверены, что хотите покинуть страницу?');
  if (answer) next();
  else next(false);
}

Работа с метаданными маршрутов

Для упрощения условий охранников часто используют поле meta в маршрутах. Оно может содержать информацию о необходимости авторизации, ролях пользователя или других условиях.

{
  path: '/admin',
  component: () => import('pages/Admin.vue'),
  meta: { requiresAuth: true, roles: ['admin'] }
}

В глобальном охраннике можно проверять это так:

router.beforeEach((to, from, next) => {
  const isAuthenticated = true;
  const userRole = 'admin';

  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' });
  } else if (to.meta.roles && !to.meta.roles.includes(userRole)) {
    next({ name: 'not-authorized' });
  } else {
    next();
  }
});

Асинхронные операции в охранниках

Навигационные охранники поддерживают асинхронные действия. Можно использовать async/await для загрузки данных или проверки с сервера:

router.beforeEach(async (to, from, next) => {
  try {
    const isAuthenticated = await checkAuth();
    if (to.meta.requiresAuth && !isAuthenticated) {
      next({ name: 'login' });
    } else {
      next();
    }
  } catch (error) {
    console.error(error);
    next(false); // отмена перехода
  }
});

Особенности работы в Quasar

  • SSR и PWA: навигационные охранники работают как на клиенте, так и на сервере, что позволяет реализовать защиту маршрутов для серверного рендеринга.
  • Lazy-loading страниц: при использовании динамического импорта компонентов важно учитывать, что охранники вызываются до загрузки компонента.
  • Комбинация глобальных и локальных охранников: Quasar поддерживает одновременное использование всех типов, и порядок срабатывания следующий: beforeEach → beforeEnter → in-component beforeRouteEnter → beforeResolve → afterEach.

Лучшие практики

  • Разделять логику авторизации и загрузки данных: авторизацию лучше проверять в глобальных охранниках, а загрузку данных — в локальных или компонентных.
  • Использовать meta для хранения условий доступа, чтобы охранники оставались универсальными.
  • Всегда вызывать next() или перенаправление, иначе переход будет заблокирован.
  • Для асинхронных операций использовать try/catch и корректно обрабатывать ошибки.

Навигационные охранники в Quasar обеспечивают гибкий контроль маршрутов, защищают доступ и позволяют управлять состоянием приложения при переходах, обеспечивая стабильность и безопасность интерфейса.

Оглавление