uniapp?Android解決?APP菜單、按鈕權限控制方法

更新時間：2023年01月15日 14:57:42 作者：huangfuyk

這篇文章主要介紹了uniapp?Android解決?APP菜單、按鈕權限控制方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

【前言】

近日在開發(fā)一款使用uniapp做的APP時，遇到權限的控制需求，于是便采用如下方式進行校驗（方法很多，只介紹這一種相對簡單的）。

【方法】

示例代碼如下（僅供參考）：

接口返回格式如下：

{
    "id": "wms",
    "name": "首頁",
    "url": "/pages/home-page/home-page",
    "children": [
        {
            "id": "001",
            "name": "入庫管理",
            "url": "/pages/storage-management/index",
            "children": [
                {
                    "id": "101",
                    "name": "物料入庫指令",
                    "url": "/pages/storage-management/material/index",
                    "children": [
                        {
                            "id": "10101",
                            "name": "新增"
                        }
                    ]
                },
                {
                    "id": "102",
                    "name": "成品入庫指令",
                    "url": "/pages/storage-management/material/product-in/index",
                    "children": [
                        {
                            "id": "10201",
                            "name": "新增"
                        }
                    ]
                }
            ]
        },
        {
            "id": "002",
            "name": "出庫管理",
            "url": "/pages/stock-preparation/index",
            "children": [
                {
                    "id": "201",
                    "name": "物料出庫指令",
                    "url": "/pages/stock-preparation/material-out/index",
                    "children": [
                        {
                            "id": "20101",
                            "name": "新增"
                        }
                    ]
                },
                {
                    "id": "202",
                    "name": "成品出庫指令",
                    "url": "/pages/stock-preparation/product-out/index",
                    "children": [
                        {
                            "id": "20201",
                            "name": "新增"
                        }
                    ]
                }
            ]
        }
    ]
}

2.登陸成功后，調用接口：

①拿到的JSON數(shù)據(jù)轉成一維數(shù)組；

②把每一項的id值取出，放進一個數(shù)組內；

③處理后的id數(shù)組，存到本地或者vuex。

//獲取菜單權限
getMenu() {
	return new Promise((resolve, reject) => {
		this.$System.menu({systemSigns: 'app'}).then(res => {
			if (res.data.code === 0) {
				// 拿到的權限數(shù)據(jù)轉成一維數(shù)組
				let menuArrayList = flatten(res.data.data);
				// 把每一項的id值取出，放進一個數(shù)組內
				let menuArray = [];
				menuArrayList.forEach(item => {
					menuArray.push(item.id);
				});
				// id數(shù)組，存到本地
				uni.setStorageSync('menuArray', menuArray);
				resolve(true)
			}
		})

	})
},
//轉成一維數(shù)組
flatten (arr){
	return arr.reduce((result, item)=> {
		return result.concat(item,(Array.isArray(item.children) ? flatten(item.children) : []));
	}, []);
},

3.在項目utils文件夾或其他文件夾下新建文件，例menuArr.js內寫如下內容（indexOf或includes均可）：

export function menuPerm(id){
    // 從本地緩存中異步獲取menuArray的內容
    let arr = uni.getStorageSync('menuArray');
    return arrIndexOf(arr, id);
}
// 判斷是否存在該權限
function arrIndexOf(arr, id) {
    if(arr.indexOf(id) !== -1){
        return true;
    } else {
        return false;
    }
}

4.在main.js內引入menuArr.js的方法menuPerm，在原型上定義它們，使其在每個 Vue 的實例中均可用：

import {menuPerm} from './utils/menuArr.js'

Vue.prototype.$menuPerm = menuPerm;

5.使用：v-show="$menuPerm( id )"

<button type="default" v-show="$menuPerm(20201)" @click="">新增</button>

到此這篇關于uniapp Android解決 APP菜單、按鈕權限控制方法的文章就介紹到這了,更多相關uniapp按鈕權限控制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

JavaScript簡單實現(xiàn)合并兩個Json對象的方法示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)合并兩個Json對象的方法,結合實例形式分析了json對象的遍歷、添加實現(xiàn)合并的相關操作技巧,需要的朋友可以參考下
2017-10-10
ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集（dataset）
這篇文章介紹了ECharts異步加載數(shù)據(jù)與數(shù)據(jù)集（dataset），文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
javascript canvas封裝動態(tài)時鐘
這篇文章主要為大家詳細介紹了javascript canvas封裝動態(tài)時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
Javascript設置對象的ReadOnly屬性(示例代碼)
本篇文章主要介紹了Javascript設置對象的ReadOnly屬性(示例代碼) 需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
Html中JS腳本執(zhí)行順序簡單舉例說明
寫在最前面的最先執(zhí)行，Body的onload事件要在頁面加載完后才執(zhí)行。
2010-06-06
JS求解兩數(shù)之和算法詳解
這篇文章主要介紹了JS求解兩數(shù)之和算法,結合實例形式詳細分析了JS求解兩數(shù)之和算法相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2020-04-04
JavaScript設計模式之構造器模式(生成器模式)定義與用法實例分析
這篇文章主要介紹了JavaScript設計模式之構造器模式(生成器模式)定義與用法,結合實例形式分析了javascript構造器模式的概念、原理、與工廠模式的區(qū)別以及相關使用方法,需要的朋友可以參考下
2018-07-07
一些Javascript的IE和Firefox(火狐)兼容性的問題總結及常用例子
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子
2009-05-05
微信JS-SDK選取手機照片上傳功能
這篇文章主要為大家詳細介紹了微信JS-SDK選取手機照片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
js 兩數(shù)組去除重復數(shù)值的實例
下面小編就為大家分享一篇js 兩數(shù)組去除重復數(shù)值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12