当前位置：首页 > article >正文

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

article 2025/2/5 2:08:08

在构建单页面应用时，路由守卫是一个非常重要的概念。它允许我们在路由进入或离开时执行一些操作，比如验证用户权限、处理数据加载、执行导航确认等。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 Store

const 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();
  }
});

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