前言
写了好几个项目,发现小程序对权限控制非常麻烦,于是有了这个想法,但是网上找了一圈没有一个比较完善的讲解,因为小程序不支持自定义指令,所以不能像后台那样方便,于是就将几个博主的想法结合。
思路就是v-if或者v-show,封装一个方法就行了。
使用方法
1.写权限验证js
找个地方建一个js文件,写权限验证函数,如下
注:代码验证的前提是将权限列表存储在缓存中了,所以我直接取出来验证。如有其他逻辑请自行更改。 至于权限列表从哪里来,就不在赘述了。
javascript
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中注册为全局变量(函数)

贴上代码
javascript
app.config.globalProperties.$auth=auth
app.config.globalProperties.$authAll=authAll
3.页面中直接使用
缓存中的权限为'aa:*:*'
html
<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:*:*'
html
<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。