You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Fixed reactivity bug in acl.user of useAcl() composition api. Added .user sematic alias. Added option to pass user as fourth argument to the vue-router meta async function.
@@ -51,15 +62,15 @@ A simple unopinionated Vue plugin for managing user roles and permissions, acces
51
62
- Vue 2 and Vue 3 support
52
63
- Simple but robust and power ACL plugin
53
64
- Manage roles and permissions with ease.
54
-
- Lightweight (<10 kB zipped)
65
+
- Lightweight (<3 kB zipped)
55
66
- Component `v-can` directive
56
67
- Global `$can` helper function
57
68
- Sematic alias methods and directives of different verb for directive and helper function. E.g `v-role`, `v-permission`, `$acl.permission()`, `$acl.anyRole()`, etc.
58
69
- Middleware support for [Vue Router](https://next.router.vuejs.org/) through `meta` property.
59
70
- Support user data from plain object, vuex store and asynchronous function.
60
71
- Reactive changes of abilities and permissions
61
72
- Define custom ACL rules
62
-
-TypeScript Support
73
+
-Fully Typecript: The source code is written entirely in TypeScript.
63
74
- Fully configurable
64
75
65
76
<aname="installation"></a>
@@ -90,10 +101,12 @@ yarn add vue-simple-acl
90
101
91
102
import { createApp } from'vue'
92
103
importAppfrom'./App.vue'
104
+
importrouterfrom'./store';
93
105
importstorefrom'./store';
94
106
importaclfrom'./acl'; // import the instance of the defined ACL
95
107
96
108
constapp=createApp(App);
109
+
app.use(router);
97
110
app.use(store);
98
111
app.use(acl); // install vue-simple-acl
99
112
app.mount("#app");
@@ -108,14 +121,17 @@ In Vue 2, when using User data from reactive Store/Vuex wrapped with `computed()
108
121
109
122
importVuefrom'vue'
110
123
importAppfrom'./App.vue'
124
+
importrouterfrom'./router';
111
125
importstorefrom'./store';
112
126
importaclfrom'./acl'; // import the instance of the defined ACL
113
127
114
128
Vue.config.productionTip=false;
115
129
116
-
Vue.use(store);
117
130
Vue.use(acl); // install vue-simple-acl
131
+
118
132
newVue({
133
+
router,
134
+
store,
119
135
render:h=>h(App),
120
136
}).$mount('#app')
121
137
```
@@ -306,7 +322,7 @@ export default {
306
322
// Execute this block if user is admin OR can delete post
307
323
}
308
324
309
-
// Get data of the ACL User being validated
325
+
// Get data of the defined ACL User being validated
310
326
constuser=acl.user;
311
327
}
312
328
}
@@ -404,6 +420,20 @@ or using `any` modifier
404
420
}
405
421
}
406
422
```
423
+
or get the data of the defined ACL user in the evaluations by passing `user` as the optional **fourth** argument to the defined ACL meta function
@@ -428,9 +458,9 @@ You can set the onDeniedRoute to the special value `'$from'` which will return t
428
458
429
459
| Property Name | Type | Default | Description |
430
460
| --- | --- | --- | --- |
431
-
|**can** or **allCan**|`string` OR `array` of abilities or`function(to, from, can)` of async evaluation| None | Equivalent of `$can()` and `v-can=""`|
432
-
|**notCan** or **canNot**|`string` OR `array` of abilities or`function(to, from, notCan)` of async evaluation| None | Equivalent of `$can.not()` and `v-can.not=""`|
433
-
|**anyCan** or **canAny**|`string` OR `array` of abilities or`function(to, from, anyCan)` of async evaluation| None | Equivalent of `$can.any()` and `v-can.any=""`|
461
+
|**can** or **allCan**|`string` OR `array` of abilities OR`function` of asynchronous evaluation: <spanstyle="white-space:nowrap;">`(to, from, can, user?) => {}`</span>| None | Equivalent of `$can()` and `v-can=""`|
462
+
|**notCan** or **canNot**|`string` OR `array` of abilities OR`function` of asynchronous evaluation: <spanstyle="white-space:nowrap;">`(to, from, notCan, user?)`</span>| None | Equivalent of `$can.not()` and `v-can.not=""`|
463
+
|**anyCan** or **canAny**|`string` OR `array` of abilities OR`function` of asynchronous evaluation: <spanstyle="white-space:nowrap;">`(to, from, anyCan, user?)`</span>| None | Equivalent of `$can.any()` and `v-can.any=""`|
434
464
|**onDeniedRoute**|`string` OR `object` of `route()` option | Value of the default option `onDeniedRoute`| A route to redirect to when `can|notCan|anyCan` evaluation is denied. e.g string path `'/unauthorized'` OR router option `{ path: '/unauthorized' }` OR `{ name: 'unauthorizedPage', replace: true }` OR special value **`'$from'`** which returns back to the request URI |
435
465
436
466
@@ -444,6 +474,7 @@ Vue Simple ACL also provides some directives and methods in different verb as al
| User | Get the data of the defined ACL user. <br><br> In Component:<br> `$acl.user; // returns user object` <br><br> In Option API:<br> `this.$acl.user; // returns user object` <br><br> In Composition API/`setup()`:<br> `const acl = useAcl();`<br> `acl.user; // returns user object` <br><br> In Vue Router `meta` Property:<br> _Pass `user` as the fourth argument to the defined ACL meta function_ <br><br> `roleOrPermission: (to, from, roleOrPermission, user) => {`<br> `return axios.get(`\``/api/users/${user.id}/posts/${to.params.id}`\``)`<br> `.then((response) => roleOrPermission(['admin', ['edit-post', response.data]]));`<br>`}`|
Copy file name to clipboardExpand all lines: package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
{
2
2
"name": "vue-simple-acl",
3
-
"version": "1.0.5",
3
+
"version": "1.1.0",
4
4
"description": "A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBAC).",
0 commit comments