Vue 权限管理解决方案

[tower1229]

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.

许可证

MIT

Copyright (c) 2017-present, 前端路上

[loading]

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

[xiadd]

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

[vex2]

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

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

[heeexy]

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

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

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

[tower1229]

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

[tower1229]

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