uniapp Android解决 APP菜单、按钮权限控制方法
更新时间：2023年01月15日 14:57:42 作者：huangfuyk
这篇文章主要介绍了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按钮权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS+html5 canvas实现的简单绘制折线图效果,结合实例形式分析了js结合HTML5 canvas技术实现图形绘制的数值运算与数组遍历等操作技巧,需要的朋友可以参考下2017-03-03
本篇文章主要是对php析构函数的具体用法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要分析了form.submit()不能提交表单的原因,需要的朋友可以参考下2014-10-10
这篇文章介绍了JavaScript调用后台的三种方法实例，有需要的朋友可以参考一下2013-10-10
encode脚本和normal脚本混用的问题与解决方法...2007-03-03
这篇文章主要为大家详细介绍了原生js实现放大镜效果，制作一个类似于淘宝的放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了纯js+css实现在线时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
我们大家都知道在写java和c时，必须要在语句后加分号，否则编译通不过。而js不同，存在自动分好插入机制，下文简称ASI。它会给源代码的 token 流自动插入分号。下面这篇文章我们就来谈谈Javascript的自动分号插入(ASI)机制。2016-09-09
这篇文章主要为大家详细介绍了layUI实现前端分页和后端分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
xml转json的js代码，需要的朋友可以参考下2012-08-08
最新评论