Send the request to obtain the permission and store it in localStorage

Create hasPermission. Js v – from – the Permission

import Vue from 'vue';

// Check whether you have permission
// Register a global custom directive 'v-has-permission'
const hasPermission = Vue.directive('hasPermission', {
    // When the bound element is inserted into the DOM...
    inserted: function (el, binding) {
        //getItem retrieves permissions stored locally
        let PermissionArr = JSON.parse(localStorage.getItem('hasPermission'))
        // No permission by default
        let isExist = false;
        //some Checks whether the elements in the array meet the specified criteria
        PermissionArr.some(function (permissionItem) {
            // Local permission field
            let permissionStr = permissionItem.name;
            // The binding value of the current directive
            binding.value.forEach(function (item) {
                //startsWith determines whether the string startsWith fixed data
                if (permissionStr.startsWith(item)) {
                    isExist = true}}); });// If no permission is available, remove it
        if(! isExist && el.parentNode) { el.parentNode.removeChild(el) } } })export default { hasPermission }
Copy the code

Haspermission-js registration is introduced in main.js

Use the V-HAS directive

<div v-has-permission="[' permission field ']"> I am a button </div>Copy the code

Reference blog.csdn.net/weixin_4491…