Редирект на страницу входа

В Vue Router редирект на страницу входа обычно используется для защиты маршрутов, требующих аутентификации. Основная идея заключается в том, чтобы при попытке пользователя перейти на защищённый маршрут, не пройдя авторизацию, автоматически перенаправлять его на страницу входа.

1. Создание маршрута для входа

Для начала необходимо определить маршрут для страницы входа в конфигурации маршрутов:

import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/views/Login.vue';
import Dashboard from '@/views/Dashboard.vue';

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // мета-поле для защиты маршрута
  }
];

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

export default router;

Здесь ключевой момент — использование мета-поля requiresAuth. Оно позволяет идентифицировать маршруты, доступ к которым возможен только после аутентификации.

2. Проверка аутентификации перед переходом

Для реализации редиректа используется глобальный навигационный охранник beforeEach. Он проверяет состояние авторизации пользователя перед переходом на маршрут:

router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('token')); // простая проверка наличия токена

  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

Ключевые моменты:

  • to.meta.requiresAuth — проверка, требуется ли авторизация для текущего маршрута.
  • isAuthenticated — логика определения состояния пользователя. В реальных приложениях часто используется Vuex или Pinia для хранения информации о пользователе.
  • query: { redirect: to.fullPath } — сохраняет исходный маршрут, чтобы после успешного входа пользователь мог быть перенаправлен на страницу, которую он пытался открыть.

3. Перенаправление после успешного входа

После прохождения аутентификации нужно вернуть пользователя на первоначально запрошенный маршрут. Обычно это делается в компоненте входа:

<script setup>
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

function login() {
  // Пример логики аутентификации
  localStorage.setItem('token', 'example-token');

  const redirectTo = route.query.redirect || '/dashboard';
  router.push(redirectTo);
}
</script>

Разбор логики:

  • route.query.redirect — извлекается маршрут, который пользователь пытался открыть до входа.
  • Если redirect отсутствует, используется маршрут по умолчанию, например, /dashboard.
  • router.push(redirectTo) — выполняется перенаправление на нужную страницу.

4. Защита маршрутов с динамическими параметрами

Редирект также корректно работает для маршрутов с динамическими параметрами:

{
  path: '/profile/:id',
  name: 'Profile',
  component: () => import('@/views/Profile.vue'),
  meta: { requiresAuth: true }
}

В этом случае to.fullPath сохраняет полный путь, включая параметр id, что позволяет корректно возвращать пользователя на конкретный профиль после входа.

5. Использование навигационных охранников на уровне маршрута

Вместо глобального beforeEach можно использовать beforeEnter для отдельных маршрутов:

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  beforeEnter: (to, from, next) => {
    const isAuthenticated = Boolean(localStorage.getItem('token'));
    if (!isAuthenticated) {
      next({ name: 'Login', query: { redirect: to.fullPath } });
    } else {
      next();
    }
  }
}

Это позволяет более локально контролировать поведение маршрута, без глобальной проверки для всех маршрутов.

6. Обработка выхода из системы

При выходе пользователя важно удалять токен и перенаправлять его на страницу входа:

function logout() {
  localStorage.removeItem('token');
  router.push({ name: 'Login' });
}

Дополнительно можно сбрасывать состояние приложения, чтобы закрыть доступ к защищённым компонентам до повторной авторизации.

7. Советы по безопасности и UX

  • Всегда хранить токен в безопасном месте (например, HttpOnly cookies для реального приложения).
  • Использовать навигационные охранники на всех маршрутах, требующих авторизации, чтобы исключить обход защиты.
  • Предоставлять пользователю понятный опыт: возвращение на исходный маршрут после входа улучшает UX.
  • Для SPA с большим количеством защищённых маршрутов удобно создать утилитарную функцию проверки аутентификации, чтобы не дублировать код.

Редирект на страницу входа в Vue Router — ключевой инструмент при построении защищённых SPA, обеспечивающий безопасность и удобство навигации.

Оглавление