uniapp?Android解決?APP菜單、按鈕權(quán)限控制方法
【前言】
近日在開(kāi)發(fā)一款使用uniapp做的APP時(shí)，遇到權(quán)限的控制需求，于是便采用如下方式進(jìn)行校驗(yàn)（方法很多，只介紹這一種相對(duì)簡(jiǎn)單的）。
【方法】
示例代碼如下（僅供參考）：
接口返回格式如下：
{
"id": "wms",
"name": "首頁(yè)",
"url": "/pages/home-page/home-page",
"children": [
{
"id": "001",
"name": "入庫(kù)管理",
"url": "/pages/storage-management/index",
"children": [
{
"id": "101",
"name": "物料入庫(kù)指令",
"url": "/pages/storage-management/material/index",
"children": [
{
"id": "10101",
"name": "新增"
}
]
},
{
"id": "102",
"name": "成品入庫(kù)指令",
"url": "/pages/storage-management/material/product-in/index",
"children": [
{
"id": "10201",
"name": "新增"
}
]
}
]
},
{
"id": "002",
"name": "出庫(kù)管理",
"url": "/pages/stock-preparation/index",
"children": [
{
"id": "201",
"name": "物料出庫(kù)指令",
"url": "/pages/stock-preparation/material-out/index",
"children": [
{
"id": "20101",
"name": "新增"
}
]
},
{
"id": "202",
"name": "成品出庫(kù)指令",
"url": "/pages/stock-preparation/product-out/index",
"children": [
{
"id": "20201",
"name": "新增"
}
]
}
]
}
]
}
2.登陸成功后，調(diào)用接口：
①拿到的JSON數(shù)據(jù)轉(zhuǎn)成一維數(shù)組；
②把每一項(xiàng)的id值取出，放進(jìn)一個(gè)數(shù)組內(nèi)；
③處理后的id數(shù)組，存到本地或者vuex。
//獲取菜單權(quán)限
getMenu() {
return new Promise((resolve, reject) => {
this.$System.menu({systemSigns: 'app'}).then(res => {
if (res.data.code === 0) {
// 拿到的權(quán)限數(shù)據(jù)轉(zhuǎn)成一維數(shù)組
let menuArrayList = flatten(res.data.data);
// 把每一項(xiàng)的id值取出，放進(jìn)一個(gè)數(shù)組內(nèi)
let menuArray = [];
menuArrayList.forEach(item => {
menuArray.push(item.id);
});
// id數(shù)組，存到本地
uni.setStorageSync('menuArray', menuArray);
resolve(true)
}
})
})
},
//轉(zhuǎn)成一維數(shù)組
flatten (arr){
return arr.reduce((result, item)=> {
return result.concat(item,(Array.isArray(item.children) ? flatten(item.children) : []));
}, []);
},3.在項(xiàng)目utils文件夾或其他文件夾下新建文件，例menuArr.js內(nèi)寫(xiě)如下內(nèi)容（indexOf或includes均可）：
export function menuPerm(id){
// 從本地緩存中異步獲取menuArray的內(nèi)容
let arr = uni.getStorageSync('menuArray');
return arrIndexOf(arr, id);
}
// 判斷是否存在該權(quán)限
function arrIndexOf(arr, id) {
if(arr.indexOf(id) !== -1){
return true;
} else {
return false;
}
}4.在main.js內(nèi)引入menuArr.js的方法menuPerm，在原型上定義它們，使其在每個(gè) Vue 的實(shí)例中均可用：
import {menuPerm} from './utils/menuArr.js'
Vue.prototype.$menuPerm = menuPerm;5.使用：v-show="$menuPerm( id )"
<button type="default" v-show="$menuPerm(20201)" @click="">新增</button>
到此這篇關(guān)于uniapp Android解決 APP菜單、按鈕權(quán)限控制方法的文章就介紹到這了,更多相關(guān)uniapp按鈕權(quán)限控制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)合并兩個(gè)Json對(duì)象的方法,結(jié)合實(shí)例形式分析了json對(duì)象的遍歷、添加實(shí)現(xiàn)合并的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集（dataset）
這篇文章介紹了ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集（dataset），文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Javascript設(shè)置對(duì)象的ReadOnly屬性(示例代碼)
本篇文章主要介紹了Javascript設(shè)置對(duì)象的ReadOnly屬性(示例代碼) 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
Html中JS腳本執(zhí)行順序簡(jiǎn)單舉例說(shuō)明
寫(xiě)在最前面的最先執(zhí)行，Body的onload事件要在頁(yè)面加載完后才執(zhí)行。2010-06-06
這篇文章主要介紹了JS求解兩數(shù)之和算法,結(jié)合實(shí)例形式詳細(xì)分析了JS求解兩數(shù)之和算法相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造器模式(生成器模式)定義與用法,結(jié)合實(shí)例形式分析了javascript構(gòu)造器模式的概念、原理、與工廠模式的區(qū)別以及相關(guān)使用方法,需要的朋友可以參考下2018-07-07
一些Javascript的IE和Firefox(火狐)兼容性的問(wèn)題總結(jié)及常用例子
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子2009-05-05
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12