diff --git a/src/utils/permission.js b/src/utils/permission.js new file mode 100644 index 00000000..7bd22e01 --- /dev/null +++ b/src/utils/permission.js @@ -0,0 +1,26 @@ +import store from '@/store' + +/** + * @param {Array} value + * @returns {Boolean} + * @example see @/views/permission/directive.vue + */ +export default function checkPermission(value) { + if (value && value instanceof Array && value.length > 0) { + const roles = store.getters && store.getters.roles + const permissionRoles = value + + const hasPermission = roles.some(role => { + return permissionRoles.includes(role) + }) + + if (!hasPermission) { + return false + } + return true + } else { + console.error(`need roles! Like v-permission="['admin','editor']"`) + return false + } +} + diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue index d6e6a928..c303e886 100644 --- a/src/views/permission/directive.vue +++ b/src/views/permission/directive.vue @@ -16,11 +16,23 @@ <el-tag class="permission-tag" size="small">editor</el-tag> can see this </span> </div> + + <div style="margin-top:30px;" :key="'checkPermission'+key"> + <code>In some cases it is not suitable to use v-permission, such as element Tab component which can only be achieved by manually setting the v-if. + <br> e.g. + </code> + <el-tabs type="border-card" style="width:500px;"> + <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane> + <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane> + <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane> + </el-tabs> + </div> </div> </template> <script> import permission from '@/directive/permission/index.js' // 权限判断指令 +import checkPermission from '@/utils/permission' // 权限判断函数 import SwitchRoles from './components/SwitchRoles' export default{ @@ -33,6 +45,7 @@ export default{ } }, methods: { + checkPermission, handleRolesChange() { this.key++ }