vue3.x学习笔记之项目实战 -- 路由守卫

• 路由守卫

• 示例
• 其他示例

路由守卫

路由守卫（Route Guard）是一种在前端框架中用于保护页面导航的机制。它可以用来控制用户是否有权限访问特定的页面或执行特定的操作。

通常，路由守卫可以用来实现以下功能：

1. 身份验证：确保用户已经登录并且具有正确的身份认证，以防止未经授权的访问敏感页面。
2. 权限控制：根据用户角色和权限，限制用户访问某些受限制的页面或执行某些受限制的操作。
3. 数据加载：在进入某个页面之前，确保所需的数据已经加载完成，以避免在页面渲染时出现不完整或错误的情况。

在不同的前端框架中，实现路由守卫的方式可能会有所不同。例如，在Vue.js中，可以使用导航守卫（Navigation Guards）来实现路由守卫的功能；而在Angular中，则可以使用路由守卫（Route Guards）来实现相似的功能。

通过使用路由守卫，可以有效地保护应用程序的安全性和数据的完整性，同时提供更好的用户体验。

示例

// 挂载路由导航守卫：to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作
router.beforeEach((to, from, next) => {
  // 修改页面 title
  if (to.meta.title) {
    document.title = '后台管理系统 - ' + to.meta.title
  }
  // 放行登录页面
  if (to.path === '/login') {
    return next()
  }
  // 获取token
  const token= localStorage.getItem('token')
  if (!token) {
    return next('/login')
  } else {
    next()
  }
  return next()
})

其他示例

在Vue 3 中，可以通过使用路由守卫函数来实现路由守卫。路由守卫函数是在导航过程中进行拦截和控制的函数，可以在导航前、导航后或导航中进行相应的操作。

下面是一个简单的示例，演示了如何在Vue 3中使用路由守卫来进行身份验证：

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

const routes = [
  { path: '/', component: Home },
  { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  // 其他路由配置
];

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

router.beforeEach((to, from, next) => {
  const isLoggedIn = checkIfUserIsLoggedIn(); // 自定义函数，用于检查用户是否已登录
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login'); // 如果需要登录且用户未登录，则重定向到登录页面
  } else {
    next(); // 否则允许导航
  }
});

export default router;