In the project often need to control the elements on the interface according to the user’s authority, here has introduced a simple implementation, for reference only.

The list of permissions for the current user is stored in the Store, or anywhere else.

instruction

// src/directives/permission.js
import Vue from 'vue';
import store from '@/store';
import {get} from '@/utils';

// Whether you have permission
const hasPermission = userPermission= > {
    let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
    // List of permissions for the current user
    let permissionList = get(store, 'getters["user/permission"]'[]);return userPermissionList.some(e= > permissionList.includes(e));
};

/ / instructions
Vue.directive('per', {
    bind: (el, binding, vnode) = > {
        if(! hasPermission(binding.value)) { el.parentNode.removeChild(el); }}});// Global judgment method
Vue.prototype.$_has = hasPermission;
Copy the code

Method of use

Introduced in the mian. Js

< div v - per = "/ admin" > admin is visible to the admin: {{$_has (' admin ')}} / / true < div >Copy the code

In this paper, the author: Shellming this article links: shellming.com/2019/04/23/… Copyright Notice: All articles on this blog are licensed under a CC BY-NC-SA 3.0 license unless otherwise stated. Reprint please indicate the source!