tower1229 / vue-access-control

:gem: Frontend access control framework based Vue

English | 中文

vue-access-control

💎 Frontend access control framework based Vue

A new version is ready, with a modular design that is less invasive to the business, fully compatible with V1 version interface data

---

Introduction

Vue-Access-Control is a solution of front-end user rights control based on Vue/Vue-Router/axios,through the control of three levels of routing, view and request, the developer can realize the user authority control of any granularity.

The management function can refer to CuttingMat project.

Documentation

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

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

用addRoutes实现动态路由

Download

homepage: http://refined-x.com/Vue-Access-Control/

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

Live Example

test account:

1. username: root
   password: any password
2. username: client
   password: any password

live example:

http://refined-x.com/Vue-Access-Control/

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

License

Copyright (c) 2017-present, refined-x.com

vue-access-control's Issues

指令v-has只能在自定义组件中使用，而无法在原生HTML标签中使用

你好。
v-has在原生HTML标签中使用时，如果判断条件满足，会因为el查找不到父节点而报错。不知是否设计如此，只允许在自定义组件中使用。

<!--报错代码-->
<div class="operation" v-has="[goods.remove]"></div> 

[Vue warn]: Error in directive has bind hook: "TypeError: Cannot read property 'removeChild' of null"

TypeError: Cannot read property 'removeChild' of null

是否可以通过在bind方法中设置元素隐藏，然后在inserted方法中移除元素的方式实现。

支持三级菜单或者再多级菜单么？

Hi i have issue. npm run dev after printing this log

WAIT Compiling... 11:04:23 AM
94% asset optimization

ERROR Failed to compile with 4 errors 11:04:25 AM
error in ./src/App.vue

Syntax Error: Unexpected token {

@ ./src/main.js 5:0-28
@ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

error in ./src/views/login.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 9:11-51
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

error in ./src/views/common/401.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 15:11-56
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

error in ./src/views/common/404.vue

Syntax Error: Unexpected token {

@ ./src/router/index.js 21:11-56
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8088 webpack/hot/dev-server ./src/main.js

丰富注释

将源码整理一遍，加上详细的注释

The Demo page is offline

The Demo page is offline

在main.js注册has指令，在bind钩子函数里removeChild会报错，找不到父节点

在main.js注册has指令，在bind钩子函数里removeChild会报错，找不到父节点，换成inserted就好了
TypeError: Cannot read property 'removeChild' of null

ps：我没有直接使用你的权限控制，而 只是模仿你的注册自定义指令代码，就遇到了这个问题，不知道有何解？

code：

// main.js
Vue.directive('has', {
  inserted: function (el, binding) {
    if (!Vue.prototype.$_has(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

// Layout.vue(app.vue routerview的节点)
created () {
  this.$store.dispatch('getUserInfo')
}

// store.js 
getUserInfo () {
.....
 service.get('/userinfo').then(user => {
     commit('setUserInfo', user)
     Vue.prototype.$_has = function (rArray) {
        let requiredPermission = []
        let permission = true
        if (Array.isArray(rArray)) {
           rArray.forEach(role => {
               requiredPermission = requiredPermission.concat(role)
           })
        } else {
             requiredPermission.push(rArray)
        }
        if (!requiredPermission.includes(role)) {
           permission = false
        }
          return permission
     }
})
....

}

你好，你访问后台接口数据用的是什么方式，是mock吗

后台登不进去了？

哈喽~还在维护吗？怎么登录不进去了呢

rap2api.taobao.org的请求失效

这几天刚好在做权限控制，开发中突然请求都是500码，然后过了一晚，请求就不可用了。

get:
http://rap2api.taobao.org/app/mock/224/GET/web?name=root&password=MQ%3D%3D
Response:
{"isOk":false,"errMsg":"未匹配到任何接口 No matched interface"}

分配权限

请教一个问题，那管理员分配权限那部分如何实现

npm run lint,then show some errors:error: Parsing error: Cannot find module 'babel-eslint' at src\views\common\abstract.vue:

I cloned the repo ,then npm run lint,show many errors:

.......
xxxxxxxxxxxxx
......
error: Parsing error: Cannot find module 'babel-eslint' at src\views\roles.vue:
1 | <style scoped>
2 |
3 | .extendGroup {
4 | float: right;
5 | margin-right: 20px;
6 | opacity: 0;
7 | }
8 |
9 | .el-tree-node__content:hover .extendGroup {
10 | opacity: 1;
11 | }
12 | </style>
13 |
14 |
15 |

16 |
17 |

18 | <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询
19 | 删除
20 | 重置
21 | <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求
22 |

23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 | 编辑
34 | 删除
35 |
36 |
37 |
38 |
39 |

40 |
41 |
42 | <script>
43 | import * as role from '../api/role';
44 |
45 | let myMixin = {
46 | data: function() {
47 | return { role }
48 | }
49 | }
50 |
51 | export default {
52 | mixins: [myMixin],
53 | data() {
54 | return {
55 | list: [],
56 | canReset: true,
57 | loading: false
58 | }
59 | },
60 | methods: {
61 | fetchData() {
62 | this.loading = true;
63 | role.request.r().then((res) => {
64 | this.list = res.data.content;
65 | this.loading = false;
66 | });
67 | },
68 | requestNotAllowed: function(){
69 | role.notAllowed.r();
70 | }
71 | },
72 | created() {
73 | this.fetchData()
74 | }
75 | }
76 | </script>

error: Parsing error: Cannot find module 'babel-eslint' at babel.config.js:
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |

error: Parsing error: Cannot find module 'babel-eslint' at vue.config.js:
1 | module.exports = {
2 | outputDir: 'docs',
3 | baseUrl: process.env.NODE_ENV === 'production'
4 | ? '/Vue-Access-Control/'
5 | : '/'
6 | }

22 errors found.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] lint: vue-cli-service lint
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\changhong\AppData\Roaming\npm-cache_logs\2018-12-04T07_54_27_514Z-debug.log

how to fix it?

路由重复动态录入

您好
在App.vue模块的extendRoute方法
如果未刷新岂不是重复addRoutes了吗

服务端直接返回所有的路由权限list ,是由于网上其他那种自己filter对应权限的做法。

如果后续要添加权限角色的话 后者需要前端路由一个一个的不断添加。