使用Vue2自定义指令在uni小程序中配置权限

概述

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。

官方链接：自定义指令 | Vue.js

自定义指令其它用处

进入页面时自动聚焦

配置原因

最近公司在开发一个rep小程序，需求是不同的用户登录之后需要有不同的权限(如：总监与员工)，根据权限的不同查看的内容也有所不同，有的只可以查看列表但是不可以添加，而有的连查看某个模块的权限都没有，所以这时候就需要根据后端返回的不同权限数据来进行鉴权，控制模块或模块的功能的显示与隐藏

配置步骤

1.创建一个文件夹并创建一个专门用于存放鉴权方法的js文件(plugins.js)

2.在main.js中引入鉴权方法的js文件(plugins.js)

// 插件
import plugins from '@/common/plugins.js';
Vue.use(plugins);

3.在plugins.js中注册全局指令事件

import {auth, authAll} from "./tools";
export default {
    async install(Vue, options) {

        Vue.prototype.$auth = auth
        Vue.prototype.$authAll = authAll
        // 注册 v-auth 和 v-auth-all 指令
        Vue.directive('auth', {
            inserted: (el, binding) => {
                if (!auth(binding.value)) {
                    el.remove()
                }
            }
        })
        Vue.directive('auth-all', {
            inserted: (el, binding) => {
                if (!authAll(binding.value)) {
                    el.remove()
                }
            }
        })
    }
}

4.在tools.js中写鉴权方法(这里的store中的permission数据就是在登录的时候后端返回的该用户的权限标识)

import store from '@/store'
function hasPermission(permission) {
    return store.getters.permissions.includes(permission)
}

/**
 * 权限数据，如果传入为 array 时，匹配到其中一项则鉴权通过，并显示 slot 内容
 * @param value
 * @returns {*}
 */
export function auth(value) {
    let auth
    if (typeof value === 'string') {
        auth = value !== '' ? hasPermission(value) : true
    } else {
        auth =  value.length > 0 ? value.some(item => hasPermission(item)) : true;
    }
    return auth
}

/**
 * 权限数据，如果传入为 array 时，全部匹配则鉴权通过，并显示 slot 内容
 * @param value
 * @returns {*}
 */
export function authAll(value) {
    if (value && value.constructor  === Array){
        return value.length > 0 ? value.every(item => hasPermission(item)) : true
    }
    return true;
}

 5.使用

auth表示有某个权限就可以： v-auth="['admin-contract-barter-add']" 或 v-auth="admin-contract-barter-add" 或 v-if="$auth(['admin-contract-barter-add'])"这三种写法都可以，内容可以是字符串也可以是数组

例子

<view v-auth="['admin-contract-barter-add']" v-if="$auth(['admin-contract-barter-add'])"></view>

authAll表示必须有所有的权限才可以,缺一不可

例子

<view v-authAll="['admin-contract-barter-add','admin-contract-barter-edit']" v-if="$authAll(['admin-contract-barter-add','admin-contract-barter-edit'])"></view>