编程 Vue 3 路由守卫详解与实战

2024-11-17 04:39:17 +0800 CST views 482

Vue 3 路由守卫详解与实战

在现代 Web 应用程序开发中，路由守卫是一个必不可少的功能。特别是在使用 Vue.js 进行单页面应用开发时，路由守卫能够为应用的安全性和用户体验提供重要保障。在 Vue 3 中，路由守卫的使用变得更加灵活和强大。本文将详细介绍如何在 Vue 3 应用中使用路由守卫，并通过示例代码帮助您更深入地理解和掌握这一重要技能。

一、什么是路由守卫？

路由守卫，顾名思义，是对路由跳转进行控制和保护的一种手段。通过在路由跳转前后进行拦截，可以在用户导航到特定页面前进行一些逻辑处理，比如用户认证、数据准备、权限校验等。Vue Router 提供了三类守卫：

全局守卫：对所有路由有效。
路由独享守卫：只对单个路由有效。
组件内守卫：对特定组件有效。

二、全局路由守卫

全局路由守卫包括全局前置守卫、全局解析守卫和全局后置守卫。

1. 全局前置守卫

全局前置守卫会在每次路由变化前触发。通常用于判断用户是否有权限进入某个路由。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
});

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录
  const isAuthenticated = false; // 这里可以根据实际情况进行判断
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳转到登录页
  } else {
    next(); // 放行
  }
});

export default router;

2. 全局解析守卫

全局解析守卫在 beforeEach 和组件内守卫之间执行，用于在导航被确认前执行一些异步操作。

router.beforeResolve((to, from, next) => {
  // 这里可以执行一些异步操作，比如数据加载
  next();
});

3. 全局后置守卫

全局后置守卫不会改变导航本身，只能用于一些辅助操作，比如修改页面标题等。

router.afterEach((to, from) => {
  // 修改页面标题
  document.title = to.meta.title || '默认标题';
});

三、路由独享守卫

路由独享守卫定义在路由配置中，仅对该路由有效。

const routes = [
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    beforeEnter: (to, from, next) => {
      // 只有在用户登录时才允许访问
      const isAuthenticated = false; // 根据实际情况判断
      if (isAuthenticated) {
        next();
      } else {
        next('/login');
      }
    }
  }
];

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

export default router;

四、组件内守卫

组件内守卫是在组件内部定义的守卫，可以更细粒度地控制组件的导航行为。包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

1. beforeRouteEnter

在导航进入该组件的路由之前调用。在此守卫中无法访问 this，因为组件实例尚未创建，通常用于判断是否允许进入该路由。

export default {
  name: 'Dashboard',
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = false; // 根据实际情况判断
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  }
};

2. beforeRouteUpdate

当路由变化但仍停留在当前组件时调用，比如从 /user/1 到 /user/2。此守卫通常用于处理参数变化。

export default {
  name: 'UserProfile',
  beforeRouteUpdate(to, from, next) {
    this.userId = to.params.id; // 假设 userId 是组件的一个属性
    next();
  }
};

3. beforeRouteLeave

在导航离开该组件的路由时调用，常用于提示用户是否保存未提交的信息。

export default {
  name: 'FormComponent',
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) { // 假设 hasUnsavedChanges 用来标识是否有未保存的更改
      if (confirm('你有未保存的更改，确定离开吗？')) {
        next();
      } else {
        next(false);
      }
    } else {
      next();
    }
  }
};

五、示例代码整合

下面我们将一些常见的路由守卫需求整合到一个完整的示例应用中。

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

// 路由配置
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
    beforeEnter: (to, from, next) => {
      const isAuthenticated = false; // 根据实际情况判断
      if (isAuthenticated) {
        next();
      } else {
        next('/login');
      }
    }
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/user/:id',
    component: UserProfile
  },
  {
    path: '/form',
    component: FormComponent
  }
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // 根据实际情况判断
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');
  } else {
    next();
  }
});

// 全局后置守卫
router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题';
});

export default router;

六、总结

路由守卫在 Vue 3 中的应用使得我们能够更加灵活地控制用户导航行为。无论是全局守卫、路由独享守卫还是组件内守卫，它们各有各的使用场景。通过合理使用路由守卫，可以有效提升应用的安全性和用户体验。希望本文能帮助您更好地理解和使用 Vue 3 中的路由守卫。

复制全文生成海报前端开发 Vue.js Web应用路由管理用户体验