权限控制：Vue 3路由守卫的RBAC动态鉴权方案

引言

大家好，欢迎来到今天的讲座！今天我们要聊的是一个非常实用的话题——如何在Vue 3中实现基于角色的访问控制（RBAC）的动态鉴权。如果你曾经为权限管理头疼过，或者想让你的应用更加安全、灵活，那么这篇讲座绝对适合你！

什么是RBAC？

首先，我们来简单了解一下RBAC（Role-Based Access Control，基于角色的访问控制）。RBAC是一种常见的权限管理模型，它通过将用户分配到不同的角色，然后为每个角色定义可以访问的资源和操作，从而实现对系统的权限控制。

举个例子，假设你有一个电商系统，可能有以下几种角色：

管理员：可以管理所有用户、商品、订单等。
商家：可以管理自己的商品和订单。
普通用户：只能浏览商品和下单。

通过RBAC，你可以轻松地为不同角色设置不同的权限，而不需要为每个用户单独配置权限。这样一来，权限管理变得更加简单和高效。

为什么要在Vue 3中实现RBAC？

Vue 3是一个非常流行的前端框架，它的路由系统（vue-router）允许我们在应用的不同页面之间进行导航。然而，默认情况下，Vue 3并没有内置的权限控制机制。这意味着，如果我们不做任何处理，任何人都可以访问任何页面，这显然是不安全的。

为了确保只有授权的用户才能访问特定的页面，我们需要在路由跳转时进行权限验证。这就是为什么我们要使用路由守卫（Route Guards）来实现RBAC的原因。

Vue 3路由守卫简介

在Vue 3中，路由守卫是用于在路由跳转前后执行一些逻辑的钩子函数。通过这些钩子函数，我们可以在用户访问某个页面之前或之后执行一些操作，比如权限验证、数据预加载等。

vue-router 提供了三种主要的路由守卫：

全局前置守卫：在每次路由跳转之前执行。
路由独享守卫：只在进入特定路由时执行。
组件内守卫：在进入或离开某个组件时执行。

今天我们主要会用到全局前置守卫，因为它可以在每次路由跳转时进行权限验证，确保用户只能访问他们有权限的页面。

实现RBAC动态鉴权

接下来，我们将一步步实现一个基于RBAC的动态鉴权方案。我们会使用Vue 3的全局前置守卫来拦截用户的路由请求，并根据用户的角色来决定是否允许访问目标页面。

1. 定义角色和权限

首先，我们需要定义系统中的角色和权限。假设我们有以下角色和对应的权限：

角色	权限
管理员	访问所有页面
商家	访问商品管理和订单管理页面
普通用户	访问商品列表和购物车页面

我们可以将这些角色和权限存储在一个对象中，方便后续使用：

const roles = {
  admin: ['admin', 'merchant', 'user'],
  merchant: ['merchant', 'user'],
  user: ['user']
};

2. 配置路由

接下来，我们需要为每个页面配置对应的权限。我们可以在路由定义中添加一个 meta 字段，用来指定该页面所需的权限。例如：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import AdminDashboard from './views/AdminDashboard.vue';
import MerchantDashboard from './views/MerchantDashboard.vue';
import UserDashboard from './views/UserDashboard.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: false } // 不需要权限
  },
  {
    path: '/admin',
    name: 'AdminDashboard',
    component: AdminDashboard,
    meta: { requiredRoles: ['admin'] } // 只有管理员可以访问
  },
  {
    path: '/merchant',
    name: 'MerchantDashboard',
    component: MerchantDashboard,
    meta: { requiredRoles: ['merchant'] } // 商家和管理员可以访问
  },
  {
    path: '/user',
    name: 'UserDashboard',
    component: UserDashboard,
    meta: { requiredRoles: ['user'] } // 所有用户都可以访问
  }
];

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

export default router;

3. 创建全局前置守卫

现在，我们需要创建一个全局前置守卫，来拦截每次路由跳转并进行权限验证。我们可以通过 router.beforeEach 方法来实现这一点。

import router from './router';
import store from './store'; // 假设我们使用Vuex来管理用户信息

router.beforeEach((to, from, next) => {
  const userRole = store.state.user.role; // 获取当前用户的角色
  const requiredRoles = to.meta.requiredRoles;

  // 如果页面不需要权限，直接放行
  if (!to.meta.requiresAuth || !requiredRoles) {
    return next();
  }

  // 如果用户没有登录，重定向到登录页面
  if (!userRole) {
    return next({ name: 'Login' });
  }

  // 检查用户是否有权限访问目标页面
  if (roles[userRole] && requiredRoles.every(role => roles[userRole].includes(role))) {
    return next();
  }

  // 如果没有权限，重定向到403页面
  return next({ name: 'Forbidden' });
});

4. 用户角色管理

为了让上面的代码正常工作，我们需要确保用户的角色信息是可用的。通常，我们会在用户登录后将角色信息保存到 Vuex 或本地存储中。这里假设我们使用 Vuex 来管理用户状态：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    user: null // 初始状态下用户未登录
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, user) {
      commit('SET_USER', user);
    },
    logout({ commit }) {
      commit('SET_USER', null);
    }
  }
});

5. 测试与优化

现在，我们的RBAC动态鉴权系统已经基本完成了！你可以尝试登录不同角色的用户，看看他们是否能够正确访问相应的页面。如果一切正常，恭喜你，你已经成功实现了一个基于角色的权限控制系统！

当然，实际项目中可能会有更多的需求，比如：

多级权限：某些页面可能需要更细粒度的权限控制，比如“查看”和“编辑”。
动态路由：某些页面可能是动态生成的，这时你需要在运行时动态添加路由。
权限提示：当用户没有权限访问某个页面时，给出友好的提示信息。

这些功能可以根据具体需求逐步扩展和完善。

结语

通过今天的讲座，我们学习了如何在Vue 3中使用路由守卫实现基于角色的访问控制（RBAC）。虽然这个过程看起来有些复杂，但只要你掌握了核心概念，其实并不难实现。最重要的是，RBAC可以帮助我们构建更加安全、灵活的应用程序，提升用户体验。

如果你有任何问题或想法，欢迎在评论区留言！希望今天的讲座对你有所帮助，期待下次再见！

引用：

感谢大家的关注，祝你编码愉快！