Vue 3 30天精进之旅：Day 13

Vue 3 30天精进之旅：Day 13 - 路由守卫

在构建单页面应用时，路由守卫是一个非常重要的概念。它允许我们在路由进入或离开时执行一些操作，比如验证用户权限、处理数据加载、执行导航确认等。Vue Router提供了多种类型的路由守卫，使我们能够灵活地控制路由的行为。在今天的学习中，我们将重点探讨以下内容：

路由守卫概述
全局守卫
路由独享守卫
组件内守卫
动态路由守卫
使用实际示例理解路由守卫
总结与实践

1. 路由守卫概述

路由守卫是指在路由确认的过程中执行的一些钩子函数，用于控制路由的访问及处理。在Vue Router中，主要有以下几种路由守卫：

全局守卫：在所有路由变化前后生效。
路由独享守卫：只在特定路由的变化时生效。
组件内守卫：在组件的生命周期中执行的守卫。

通过这些守卫，你可以放心地控制用户访问权限、加载数据、显示loading等状态。

2. 全局守卫

全局守卫是在创建路由实例时通过 router.beforeEach 和 router.afterEach 方法定义的。beforeEach 会在每次路由切换前执行，而 afterEach 则在路由切换后执行。

示例

javascript

// main.js
import { createRouter, createWebHistory } from 'vue-router';
import store from './store'; // 引入Vuex Storeconst routes = [/* 定义路由 */
];const router = createRouter({history: createWebHistory(),routes,
});// 全局前置守卫
router.beforeEach((to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated; // 从Vuex中检验用户认证状态if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'login' }); // 未登录，重定向到登录页} else {next(); // 继续路由}
});// 全局后置守卫
router.afterEach((to, from) => {console.log('Navigated to:', to.name);
});export default router;

在这个示例中，beforeEach 用于检查用户是否已认证，如果目标路由需要认证但用户未登录，则重定向到登录页面。

3. 路由独享守卫

路由独享守卫是在特定路由配置中的 beforeEnter 函数。它仅在该路由被访问时执行。

示例

javascript

const routes = [{path: '/protected',component: ProtectedView,beforeEnter: (to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated;if (isAuthenticated) {next(); // 继续访问} else {next({ name: 'login' }); // 重定向到登录}},},
];

在这个示例中，beforeEnter 检查用户是否认证，只有认证用户才可以访问 /protected 页面。

4. 组件内守卫

组件内守卫是指在某个组件的主入口中定义的守卫，有三个主要钩子函数：beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

示例

javascript

export default {name: 'SomeComponent',beforeRouteEnter(to, from, next) {// 在路由进入前执行console.log('Entering SomeComponent');next();},beforeRouteUpdate(to, from, next) {// 在路由更新时执行console.log('Updating SomeComponent');next();},beforeRouteLeave(to, from, next) {// 在路由离开前执行const answer = window.confirm('Are you sure you want to leave this page?');if (answer) {next();} else {next(false); // 取消导航}},
};

在这个示例中，beforeRouteLeave 可以处理用户在页面离开之前的确认提示。

5. 动态路由守卫

动态路由守卫是在创建路由时定义的，用于在特定条件下运行的守卫。例如，根据用户的角色权限决定用户能访问哪些路由。

示例

javascript

const routes = [{path: '/admin',component: AdminView,meta: { requiresAuth: true, roles: ['admin'] },beforeEnter: (to, from, next) => {const userRole = store.state.user.role;if (to.meta.roles.includes(userRole)) {next();} else {next({ name: 'forbidden' });}},},
];

这里通过 meta 和路由守卫来验证用户角色，只有具有 admin 角色的用户能够访问该路由。

6. 使用实际示例理解路由守卫

下面是一个简单的应用示例，它集成了全局守卫、路由独享守卫和组件内守卫：

组件示例

vue

<template><div><h1>Welcome to My App</h1><router-link to="/protected">Go to Protected Page</router-link><router-link to="/admin">Go to Admin Page</router-link></div>
</template><script>
export default {name: 'Home',
};
</script>

路由配置示例

javascript

const routes = [{ path: '/', component: Home },{ path: '/protected', component: ProtectedView, meta: { requiresAuth: true } },{ path: '/admin', component: AdminView, meta: { requiresAuth: true, roles: ['admin'] } },{ path: '/login', component: Login },{ path: '/forbidden', component: Forbidden },
];const router = createRouter({history: createWebHistory(),routes,
});// 全局守卫
router.beforeEach((to, from, next) => {const isAuthenticated = store.state.user.isAuthenticated;if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'login' });} else {next();}
});

在这个例子中，用户在未认证的情况下尝试访问受保护的页面时，将被重定向到登录页面。