元素级别的权限控制

前端在权限控制这块主要应用的有两个，第一：页面权限，这个比较常见了，平时写的路由就是控制页面的权限，第二：元素级别的权限控制，如果是在登陆系统就分配好权限，就没啥难度和页面权限做法相同了，难点就是系统里面有修改权限，根据权限来显示和隐藏不同的内容。

一、Vue 中的按钮权限

这个是比较常见了，在 Vue 中我们通常是使用 v-if 来实现，但是如果这中元素级别的权限过多，肯定是不利于管理的。所以实现方式在 Vue 中我想到的有两种：

自定义指令方式

Vue 官方自定义指令

App.vue 组件：

<template>
    <div>
        <h1>i am home button</h1>
        <div v-permission="1">
            <button>home</button>
        </div>
    </div>
    <div>
        <h1>i am back button</h1>
        <div v-permission="10">
            <button>back</button>
        </div>
    </div>
</template>

main.js 入口文件：

import permission from "./views/permission";

Vue.directive("permission",{
    inserted:function(el,binding){
        const hasPermission = permission(binding.value);
        if(hasPermission){
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
});

permission.js 文件：

export default function permission(key){
    let permissionList = [1,2,3,4];
    let index = permissionList.indexOf(key);

    if(index > -1 ){
        return true;
    }else{
        return false;
    }

}

自定义组件方式
main.js 入口文件：

import Permission from "./views/Permission.vue";

Vue.component('Permission',Permission);

注册组件为全局组件。

App.vue 通过 props 传过去：

<Permission permission="{'auth':'true','component':'<button>back</button>'}"></Permission>

Permission.vue

<template>
    <div>
        <div v-if="key.auth">
            <h1>你好</h1>
            <div v-html="key.component"></div>
        </div>
        和
    </div>
</template>

<script>
export default {
    props:["permission"],
    data(){
        return {
            key : null
        }
    },
    created(){
        // JSON.parse 必须是单引号保着双引号
        this.key = JSON.parse('{"auth":true,"component":"<button>back</button>"}');
    }
}
</script>

二、React 中的按钮权限

React 相对 Vue 来讲没有那么多的 API，所以最常用的做法就是自定义组件来实现。思路和 Vue 的自定义组件实现方式相同，不同的是 Vue 组件显示隐藏使用的是 v-if ， React 使用的是三元运算符。

略。。。

当前时间 Thursday, May 14, 2020 22:21:18