uniapp开发小程序，如何根据权限动态配置按钮或页面内容_uniapp 权限控制

前言

写了好几个项目，发现小程序对权限控制非常麻烦，于是有了这个想法，但是网上找了一圈没有一个比较完善的讲解，因为小程序不支持自定义指令，所以不能像后台那样方便，于是就将几个博主的想法结合。
思路就是v-if或者v-show，封装一个方法就行了。

使用方法

1.写权限验证js

找个地方建一个js文件，写权限验证函数，如下
注：代码验证的前提是将权限列表存储在缓存中了，所以我直接取出来验证。如有其他逻辑请自行更改。 至于权限列表从哪里来，就不在赘述了。

import userStore from \"../store/userStore.js\"// 验证用户是否含有指定权限，只需包含其中一个export function auth(authList){return authList.some((item) => { return verifySingleAuth(item);});}// 验证用户是否含有指定权限，必须全部拥有export function authAll(authList){return authList.every((item) => { return verifySingleAuth(item);});}//验证权限function verifySingleAuth(permission){const store = userStore();const all_permission = \'*:*:*\';//所有权限标识const permissions = store.permissions;if (permission && permission.length > 0) { return permissions.some((v) => { return all_permission === v || v === permission; });} else { return false;}}

2.main.js中注册为全局变量（函数）

贴上代码

app.config.globalProperties.$auth=authapp.config.globalProperties.$authAll=authAll

3.页面中直接使用

缓存中的权限为\'aa:*:*\'

<template><view class=\"content\">测试一验证结果：{{$auth([\'aa:*:*\',\'bb:*:*\'])}}<view v-show=\"$auth([\'aa:*:*\',\'bb:*:*\'])\"><uv-button type=\"primary\" shape=\"circle\" text=\"按钮\"></uv-button></view></view></template>

缓存中的权限为\'aa:*:*\'

<template><view class=\"content\">全部权限验证结果：{{$authAll([\'aa:*:*\',\'bb:*:*\'])}}<view v-show=\"$authAll([\'aa:*:*\',\'bb:*:*\'])\"><uv-button type=\"primary\" shape=\"circle\" text=\"按钮\"></uv-button></view></view></template>

搞定，示例中使用的是v-show,当然，使用v-if也是可以的，但是我发现，每当页面有值变化时，都会重复的调用，而且会调很多次，我猜测应该是数据变化，会重新渲染Dom，导致重复判断，可能会导致性能下降或者卡顿，所以我选择使用v-show。