当前位置： 技术文章>> Vue 项目如何通过 Vue Router 实现自定义路由守卫？

文章标题：Vue 项目如何通过 Vue Router 实现自定义路由守卫？
  • 文章分类: 后端
  • 4120 阅读

在Vue项目中，Vue Router是管理页面路由的核心库，它允许我们构建单页面应用（SPA）时轻松定义和导航不同的URL路径。自定义路由守卫是Vue Router提供的一项强大功能，它允许我们在路由发生变化时执行自定义逻辑，比如验证用户权限、加载数据等。接下来，我将详细阐述如何通过Vue Router实现自定义路由守卫，并在适当的地方融入“码小课”这一元素，以确保内容的自然与流畅。

一、Vue Router基础

在开始讨论自定义路由守卫之前，先简要回顾Vue Router的基础知识。Vue Router通过路由表（routes）来定义应用的路由，每个路由应映射一个组件。在Vue实例中，通过router-view组件来渲染匹配的路由组件。

// 引入Vue和VueRouter
import Vue from 'vue';
import Router from 'vue-router';

// 引入路由组件
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

二、全局守卫

Vue Router提供了几种全局守卫，它们可以在路由发生变化时全局性地执行代码。最常见的有beforeEach和afterEach。

2.1 全局前置守卫 beforeEach

beforeEach守卫在路由即将改变前调用，它接收三个参数：to（即将进入的目标路由对象）、from（离开的路由对象）和next（一个必须调用的函数）。next函数用于解析守卫中的钩子，你可以传入一个错误或路径来中断导航。

router.beforeEach((to, from, next) => {
  // 在这里添加自定义逻辑
  // 比如，检查用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否已登录，这里仅为示例
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

// 假设的isAuthenticated函数，用于检查用户是否登录
function isAuthenticated() {
  // 假设这里有登录状态的检查逻辑
  return false; // 仅为示例
}

在上面的例子中，我们通过在路由配置中设置meta字段来标识哪些路由需要认证。然后，在beforeEach守卫中检查这些字段，并据此决定是否允许用户访问。

2.2 全局后置守卫 afterEach

afterEach守卫在路由成功跳转后调用，它同样接收to和from两个参数，但不再接收next函数，因为此时路由已经跳转完成。afterEach守卫通常用于执行一些收尾工作，如清理或设置全局状态。

router.afterEach((to, from) => {
  // 可以在这里设置页面标题等
  document.title = to.meta.title || '默认标题';
});

三、路由独享守卫

除了全局守卫外，Vue Router还允许我们对单个路由配置独享的守卫。这些守卫与全局守卫类似，但它们只影响它们所在的路由。

const routes = [
  {
    path: '/special',
    component: Special,
    beforeEnter: (to, from, next) => {
      // 路由独享守卫
      // 自定义逻辑...
      next();
    }
  }
];

四、组件内的守卫

Vue Router还允许我们在路由组件内部直接定义守卫，包括beforeRouteEnter、beforeRouteUpdate（2.2+）和beforeRouteLeave。

  • beforeRouteEnter：在进入路由前调用，此时组件实例还未被创建，不能通过this访问组件实例。
  • beforeRouteUpdate：在当前路由改变，但组件被复用时调用。例如，从一个用户资料到另一个用户资料，用户资料组件会被复用，但用户ID不同。
  • beforeRouteLeave：导航离开该组件的对应路由时调用，可以用来提示用户是否保存更改等。
<template>
  <div>
    <!-- 组件模板 -->
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    // 比如，你可以在用户离开前保存数据
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
}
</script>

五、结合“码小课”的实例

假设在“码小课”项目中，我们有一个课程详情页面，该页面需要根据课程ID从服务器加载课程数据。同时，我们要求用户必须登录才能查看课程详情。

首先，我们在路由配置中为课程详情页面设置meta字段，标识需要认证。

const routes = [
  // 其他路由...
  {
    path: '/course/:id',
    name: 'CourseDetail',
    component: CourseDetail,
    meta: { requiresAuth: true }
  }
];

然后，在全局前置守卫中检查用户是否登录，并在需要时重定向到登录页面。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

// 假设的isAuthenticated函数
function isAuthenticated() {
  // 这里应该是真实的登录状态检查逻辑
  return false; // 仅为示例
}

在CourseDetail组件内部，我们可以使用beforeRouteEnter守卫来预加载课程数据。

<template>
  <div>
    <!-- 展示课程数据 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseData: null
    };
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 调用API加载课程数据
    fetchCourseData(to.params.id).then(data => {
      next(vm => {
        // 在组件实例被创建后调用
        // 通过把 vm 作为 next 的参数，你可以访问组件实例
        vm.courseData = data;
      });
    }).catch(error => {
      // 处理加载数据时的错误
      next(false);
    });
  },
  methods: {
    // 可以定义其他方法...
  }
}

// 假设的fetchCourseData函数，用于从服务器加载课程数据
function fetchCourseData(id) {
  // 发送请求获取数据...
  return Promise.resolve({ /* 模拟的课程数据 */ });
}
</script>

通过以上步骤，我们成功地将Vue Router的自定义路由守卫应用于“码小课”项目中，实现了用户登录验证和页面数据预加载等功能。这样的设计不仅提高了用户体验，还增强了应用的安全性和响应性。

推荐文章