Roles and Permissions
Introduction
Laravue's permissions system is based on spatie/laravel-permission. As the design, a user can belong to many roles. However, in the scope of demo project, Laravue allows creating user with only one role. You can custom source code to support multi-roles.
How it works
After logged-in, server returns all the permissions of authenticated user, then generates the routing table accessible by them, and dynamically mount it to router
through router.addRoutes
.
User's permissions contain the permissons of user's role and extra permissions assigning to that user.
permission in UserResource
Logical modification
The control code of the routing level right now is in @/permission.js
. If you want to change the logic, you can release the hook next()
directly in the appropriate judgment logic.
Directives
Laravue provides v-permission and v-role directives to easily and quickly work with roles and permissions.
How to use
<template>
<!-- Only user who has 'manage user' or 'list user' permission can see it -->
<el-tag v-permission="['manage user', 'list user']">Users</el-tag>
<!-- Only user who has 'view menu table' permission can see it -->
<el-tag v-permission="['view menu table']">Tables</el-tag>
<!-- Admin can see this -->
<el-tag v-role="['admin']">admin</el-tag>
<!-- Editor can see this -->
<el-tag v-role="['editor']">editor</el-tag>
<!-- Admin or Editor can see this -->
<el-tag v-role="['admin', 'editor']">Both admin or editor can see this</el-tag>
<!-- Admin has permission 'manage user' can see this -->
<el-tag v-role="['admin']" v-permission="['manage user']">Manage users</el-tag>
</template>
<script>
// Of course you have to register them by importing directives
import permission from '@/directive/permission/index.js'
import role from '@/directive/role/index.js'
export default {
directives: { permission, role }
}
</script>
Note
When using v-role
and v-permission
together, it will use AND operation.
Examples
You can find more examples here
Limitation
In some cases it is not suitable to use v-permission
or v-role
, for instance the element Tab component which can only be achieved by manually setting the v-if.
You can use the global permission/role checking methods. The usage is similar to the instruction v-permission
/v-role
.
<template>
<el-tab-pane v-if="checkPermission(['manage user'])" label="Manage user">User who has 'manage user' permission can see this</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin'])" label="Admin">Admin can see this</el-tab-pane>
<el-tab-pane v-if="checkRole(['editor'])" label="Editor">Editor can see this</el-tab-pane>
<el-tab-pane v-if="checkRole(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>
<script>
import checkPermission from '@/utils/permission';
import checkRole from '@/utils/role';
export default{
methods: {
checkPermission,
checkRole,
}
}
</script>