前言
寫了好幾個項目，發現小程序對權限控制非常麻煩，于是有了這個想法，但是網上找了一圈沒有一個比較完善的講解，因為小程序不支持自定義指令，所以不能像后臺那樣方便，于是就將幾個博主的想法結合。
思路就是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。
)
)
