Vue Role Manager
A Vue.js plugin that manage user roles. Including routes protect, vue directive. Inspired by vue-router-user-roles
Installation
Vue
options
router
: (required) Vue router instanceredirect
: (optional) Default redirect name. default:'login'
metaName
: (optional) Meta name in router config. default:'roles'
whitelist
: (optional) Array of route names. VRM will skip checking these routes. default: value ofredirect
debug
: (optional) Show debug info in console or not. default:false
enabled
: (optional) Enable route filter by role or not. default:true
Router config
path: '/home' name: 'home' component: home meta: roles
roles
-
(Array of) String or Number
roles: 'role1'roles: 1roles: 'role1' 'role2'roles: 1 2 -
Object
roles:allow: 'role1'deny: 'role3'redirect: 'login'whitelist: 'login'inherit: false // default: true. inherit parent route permissionroles:allow: 'role1' 'role2'deny: 'role3' -
Function
/*** roles filter function** @param* @param* @param* @param* @returns string|array|boolean*/{returnallow: 'role1'deny: 'role3'redirect: '401'}roles:/*** roles filter function** @param* @param* @param* @param* @returns string|array|boolean*/{return 'role1' 'role2' // string|array|boolean}roles:/*** roles filter function** @param* @param* @param* @param* @returns string|array|boolean*/{return true // string|array|boolean}
Methods
-
setRoles(string|array|null)
// set current user's rolesVueprototype$vrmthis$vrm -
getRoles()
// get current user's rolesconst userRoles = Vueprototype$vrmconst userRoles = this$vrm -
addRoutes([route configs][, parent])
const allRoutes addedRoutes = this$vrmconst allRoutes addedRoutes = this$vrm -
hasAccess([])
// check current user's roleconst hasAccess = this$vrm -
hasAccessToRoute(route)
const hasAccess = this$vrm -
findRouteByName(name)
// check current user's roleconst route = this$vrm
Directive
-
args
- action
- class
-
modifiers
- action: remove, hidden, disable
- class: any string
-
Examples
<!-- only create the button for 'admin' -->Remove<!-- same as above --><!-- action available value: 'remove', 'hidden , 'disable' -->Remove<!-- add class 'my-class-name' for those are neither 'admin' nor 'editor' -->Edit