Что такое навигационные охранники в Vue Router?
Навигационные охранники в Vue Router — это функции, которые позволяют вам контролировать доступ к маршрутам (pages) вашего приложения на основе определенных условий. Это может быть полезно для проверки авторизации пользователя, защиты маршрутов от несанкционированного доступа или для выполнения других действий перед переходом на новую страницу.
Основные типы навигационных охранников
Существует три основных типа навигационных охранников, которые мы можем использовать в Vue Router:
Примеры
Глобальные охранники
Для определения глобальных охранников, мы можем использовать методы beforeEach и afterEach в создаваемом экземпляре роутера:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';
Vue.use(Router);
const router = new Router({
routes: [
{ path: '/', component: Home },
{ path: '/login', component: Login },
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
]
});
// Глобальный охранник перед переходом
router.beforeEach((to, from, next) => {
const isAuthenticated = false; // Здесь должна быть ваша логика проверки аутентификации
if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
next({ path: '/login' });
} else {
next(); // Позволяем переход
}
});
// Глобальный охранник после перехода
router.afterEach((to, from) => {
console.log('Переход на:', to.path);
});
export default router;
Охранники маршрута
Вы также можете установить охранники маршрутов непосредственно в конфигурации маршрута:
const router = new Router({
routes: [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
const isAuthenticated = false; // Здесь должна быть ваша логика проверки аутентификации
if (isAuthenticated) {
next();
} else {
next({ path: '/login' });
}
}
}
]
});
Охранники компонентов
Иногда вам может понадобиться проверка условий непосредственно в компоненте. В этом случае вы можете использовать beforeRouteEnter или beforeRouteLeave:
export default {
name: 'Dashboard',
beforeRouteEnter(to, from, next) {
const isAuthenticated = false; // Здесь должна быть ваша логика проверки аутентификации
if (isAuthenticated) {
next();
} else {
next(false); // Отменяем переход
}
},
beforeRouteLeave(to, from, next) {
const answer = window.confirm('Вы уверены, что хотите покинуть эту страницу?');
next(answer);
}
};
Заключение
Навигационные охранники в Vue Router — мощный инструмент для управления доступом и взаимодействием пользователя с приложением. Понимание и правильное использование этих охранников поможет вам сделать ваше приложение более безопасным и удобным для пользователей. Изучите примеры и попробуйте реализовать свои охранники в проектах.