V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2583 天前的主题，其中的信息可能已经有所发展或是发生改变。

vue-access-control

:gem: Vue 权限管理解决方案

介绍

Vue-Access-Control 是一套基于 Vue/Vue-Router/axios 实现的前端用户权限控制解决方案，通过对路由、视图、请求三个层面的控制，使开发者可以实现任意颗粒度的用户权限控制。

文档

Vue2.0 用户权限控制解决方案

基于 Vue 实现后台系统权限控制

用 addRoutes 实现动态路由

下载

项目主页： http://refined-x.com/Vue-Access-Control/

git：git clone https://github.com/tower1229/Vue-Access-Control.git

npm：npm i vue-access-control

演示

测试账号:

1. username: root
   password: 任意
2. username: client
   password: 任意

演示地址:

vue-access-control.refined-x.com

运行及构建

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

许可证

权限

6 条回复 • 2017-12-01 08:29:29 +08:00

loading

2017-11-30 13:04:41 +08:00 via Android

后端呢，我一直对 spa 感兴趣，但是后端实现没发现太多的实践。(非 node.js)

xiadd

2017-11-30 13:39:00 +08:00

@loading 我在项目里一直用传统后端项目的前端管理以及部分使用前端框架

vex2

2017-11-30 14:13:24 +08:00

我的做法是后端 RBAC 数据，前端加 v-role / v-permission 的 directive 控制，路由在 router.beforeEach 里做干预。
将前端的 router name 跟后端的 api 对应的 router 对应。做到统一处理。

楼主代码没看不清楚啥思路。

heeexy

2017-11-30 22:27:16 +08:00

看到楼主做法和 vue-element-admin 里的做法差不多
有了现代前端框架之后,前端做权限确实舒服了很多

我的做法是无论前端后端, 验证的时候完全不看 role, 只看 permission
后端用 springboot+shiro ,
数据表里保存着 menu 和 permission 的一对多信息,前端生成菜单的时候看用户的 menu 数组,验证只需要看 permission 数组

思路写在了 https://github.com/Heeexy/SpringBoot-shiro-vue 欢迎指点

tower1229

2017-12-01 08:25:52 +08:00

@heeexy 我跟你的做法一样，也是完全不管 role，只看 permission。permission 数据包含路由和资源两部分，通过将这两部分数据具体应用到对前端路由、视图、请求三个层面的控制中，实现更小颗粒度的权限控制

tower1229

2017-12-01 08:29:29 +08:00

@vex2 我没有基于角色控制，因为这个颗粒度太粗了，而是直接基于资源权限做控制，可以做的更灵活细致一些。路由方面我用 addRoutes 实现动态路由，主要是觉得 router.beforeEach 这种做法每次跳转都要校验，像是 demo 级的实现。