在 Vue 中，如何实现 RBAC（权限系统）?

在 Vue 中，如何实现 RBAC 动态权限路由。

“权限管理”一般在大家的印象中都属于后端的责任，但这两年随着 SPA 应用的兴起，很多应用都采用了前后端分离的方式进行开发，但是纯前端的开发方式就导致，以前很多由后端模板语言硬件解决的问题，现在势必要重新造一次轮子。而如果要重造轮子，前端er 就要根据对应的公司业务需求和后端er 一起配合，基于需求和安全性来考虑，来实现这个动态路由了。

所以考虑到以上的痛点和具体的业务需求。今天我会模拟前端请求后端，获取用户权限，实现RBAC，带你从登录到验证、鉴权，最终实现动态 RBACRABC 的功能。这样一来，你会解决大部分的后台痛点。（这一讲我们用到的技术栈是 vue2.6 + vue-router + vuex + element-ui）

首先我们来看下实现后的动态演示图：

那么，我们的实现步骤应该是怎么样的呢？

1. 我们希望在进行页面导航的时候，能先根据登录用户所具有的权限，判断用户是否能访问该页面。

1. 实现可见页面的局部 UI 组件的可使用性或可见性控制，即基于自定义的权限，对比声明的接口或资源是否已经授权。

1. 实现发送请求时，传输 token，对待请求接口进行权限检查，如果用户不具有访问该后端接口的权限，则不发送请求，而是友好地提示用户。

其中要实现步骤 1 这个目标，我们的方案是：获得登录用户的可访问前端页面的 path 列表，在router 进行导航的 beforeEach 前置钩子中，处理当前用户所能请求的页面及路由可见性。

接下来我们就一步步具体来实现吧！

新建项目及脚手架和插件安装

首先，需要在个人电脑上安装好 nodejs（我的是 14.15.1），利用 nodejs 自带的 npm 包管理器安装好 vue (我的是 @vue/cli 4.5.12)。

然后在命令行中，通过以下指令，在指定目录下安装脚手架 vue-cli。

npm install -g @vue/cli

紧接着，我们使用 vue 的创建项目命令，vue create xxx (其中 xxx 是指项目名称)，在这里会有两步。

第一步：选择项目所需要的插件。

? Check the features needed for your project: 
 ◉ Choose Vue version			        // 选择vue版本
 ◉ Babel				                // 支持babel
 ◯ TypeScript				            // 支持使用 TypeScript 书写源码
 ◯ Progressive Web App (PWA) Support	// PWA 支持
 ◉ Router				                // 支持 vue-router
 ◉ Vuex					                // 支持 vuex
 ◯ CSS Pre-processors			        // 支持 CSS 预处理器
 ◉ Linter / Formatter			        // 支持代码风格检查和格式化
 ◯ Unit Testing				            // 支持单元测试
 ◯ E2E Testing				            // 支持 E2E 测试

 // 注意：你要集成什么就选就行了（注：空格键是选中与取消，A键是全选）

第二步：选择 vue 的版本（由于 vue3 目前只出来了 8 个月左右，受众面不广，所以选择 vue 2.x 版本）。

配置决定好了以后，按确定即可，最终输出如下图所示。

到这里，我们的项目就搭建完成了，你可以 CD 打开项目，跑起来。

不过由于我们做的是管理系统，所以为了节约时间，可以使用 ui 框架（element-ui）。为了页面加载和跳转更友好一点，我们还需要添加 nprogress、normalize.css。而且由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

但是有些内容需要进行相关的配置，所以我们还是要创建一个 vue.config.js 来进行数据修改，比如代理什么的，具体如下。

先安装 element-ui、nprogress 和 normalize.css。

npm install element-ui nprogress normalize.css

由于 element-ui 使用到了 sass-loader，所以我们还需要安装 sass-loader 插件。

npm install sass-loader

这里有个坑，如果sass-loader版本过高，会报错。
基本上都是 sass-loader 的版本过高导致的编译错误，所需要降低版本
解决办法：cd 到项目文件里面运行下面

npm uninstall sass-loader(卸载当前版本)

npm install [email protected]  --save-dev 

当前项目插件如下：

然后配置 vue.config.js。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。当然，你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

我们在根目录中创建 vue.config.js。

由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

等于是把以前的 webpack 放进去了 vue.config.js 里面，进行统一配置处理。

但是有些内容需要进行相关的配置，所以我们还是要创建一个 vue.config.js 来进行数据修改，比如代理啥的。

vue.config.js 文件是一个可选的配置文件，存放在根目录中，要是有这个文件，在@vue/cli-service 启动的时候会自动加载，所以我们在修改里面的内容之后，要进行项目重新加载。

至于，vue 为什么要依赖 webpack？

因为 vue 在工程化开发的时候依赖于 webpack ，而 webpack 是将所有的资源整合到一块后形成一个 html 文件 一堆 js 文件, 如果将 vue 实现多页面应用，就需要对它的依赖进行重新配置，也就是修改 webpack 的配置文件。

vue 的开发有两种，一种是直接的在 script 标签里引入 vue.js 文件即可，个人感觉做小型的多页面会比较舒坦，一旦做大型一点的项目，还是离不开 webpack。所以另一种方法也就是基于 webpack 和 vue-cli 的工程化开发。

其中关于 webpack 的配置说明，webpack 有个特性，基本的功能都是可以用配置去实现的，所以就造成一个特点“很容易忘记它”，所以就很有必要记录一下。我这里简述一下：

webpack 分为
	Entry：入口
	Output: 出口
	Module 模块
	Plugin 插件
	DevServer 服务器配置

具体详细的配置说明在代码注释里，你可以看看。