uniapp Android解決 APP菜單、按鈕權限控制方法
【前言】
近日在開發一款使用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數據轉成一維數組;
②把每一項的id值取出,放進一個數組內;
③處理後的id數組,存到本地或者vuex。
//獲取菜單權限 getMenu() { return new Promise((resolve, reject) => { this.$System.menu({systemSigns: 'app'}).then(res => { if (res.data.code === 0) { // 拿到的權限數據轉成一維數組 let menuArrayList = flatten(res.data.data); // 把每一項的id值取出,放進一個數組內 let menuArray = []; menuArrayList.forEach(item => { menuArray.push(item.id); }); // id數組,存到本地 uni.setStorageSync('menuArray', menuArray); resolve(true) } }) }) }, //轉成一維數組 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按鈕權限控制內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!