广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >uniapp Android解决 APP菜单、按钮权限控制方法
  • 380
分享到

uniapp Android解决 APP菜单、按钮权限控制方法

uniapp按钮权限控制APP菜单 2023-01-15 18:01:32 380人浏览 泡泡鱼
摘要

目录【前言】【方法】【前言】 近日在开发一款使用uniapp做的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内写如下内容(indexOfincludes均可):

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按钮权限控制内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: uniapp Android解决 APP菜单、按钮权限控制方法

本文链接: https://www.lsjlt.com/news/177816.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作