uniapp微信小程序开发给多个页面的操作性进行鉴权,根据菜单接口返回的内容判断是否有权限访问当前菜单,如果有则可以操作没有则不可以操作。
记录vuex数据
// 获取权限页面
GetMemnus() {
var that = this;
GetMemnus({
params: {
accountId: this.AccountId
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
that.$store.commit('menuList', res.Data);
that.getShowPage()
}
}).catch(err => {
})
},
引入vuex
import {
mapState,
mapGetters,
mapMutations
} from 'vuex';
获取vuex数据
computed: {
...mapGetters(['menuList'])
},
判断是否可以执行
menuIsShow: function(code) {
var menuIsShow = false
this.menuList.forEach((type) => {
if (type.SourceCode == code) {
menuIsShow = true
}
});
return menuIsShow
},
goadd(item) {
if (this.menuIsShow('Suppliers_Details_Save')) {
uni.setStorageSync('supplierManagementData', item)
uni.navigateTo({
url: '/packages/pages/enterprise/supplierManagement/add/add'
})
} else {
uni.showToast({
title: '权限不足',
icon: 'none'
})
}
},
判断是否可显示
menuIsShow: function(code) {
var menuIsShow = false
this.menuList.forEach((type) => {
if (type.SourceCode == code) {
menuIsShow = true
}
});
return menuIsShow
},
<add v-show="menuIsShow('Suppliers_Add')" url="/packages/pages/enterprise/supplierManagement/add/add"></add>
公共组件判断是否可执行
<add code="Suppliers_Add" url="/packages/pages/enterprise/supplierManagement/add/add"></add>
<template>
<view class="add" @click="goadd">
<image src="/gsgl/icon_add.png" mode=""></image>
<text>新增</text>
</view>
</template>
<script>
import {
mapState,
mapGetters,
mapMutations
} from 'vuex';
export default {
components: {},
data() {
return {}
},
props: {
url: {
type: String,
default () {
return ''
}
},
code: {
type: String,
default () {
return ''
}
},
},
computed: {
...mapGetters(['menuList'])
},
methods: {
menuIsShow: function(code) {
var menuIsShow = false
this.menuList.forEach((type) => {
if (type.SourceCode == code) {
menuIsShow = true
}
});
return menuIsShow
},
goadd() {
if (this.code && !this.menuIsShow(this.code)) {
uni.showToast({
title: '权限不足',
icon: 'none'
})
} else {
uni.navigateTo({
url: this.url
})
}
}
}
}
</script>
<style scoped lang="scss">
.add {
width: 128rpx;
height: 128rpx;
background: #4087FF;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
border-radius: 50%;
right: 28rpx;
bottom: 96rpx;
position: fixed;
image {
width: 44rpx;
height: 44rpx;
}
text {
font-size: 22rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-top: 5rpx;
}
}
</style>