流程图示
获取项目所有页面的按钮权限并存入vuex和缓存
- login.vue——项目启动
登录成功后开始处理获取登录信息和按钮权限,成功后跳转页面
// 登录成功后,处理函数
loginSuccess(result) {
// 设置用户信息
Promise.all([this.$store.dispatch('GetInfo'), this.$store.dispatch('GetButtons')]).then(() => {
this.$tab.reLaunch('/pages/work/index');
});
},
登陆成功之后,先通过this.$store.dispatch执行store目录下user.js文件中的actions中的GetButtons方法,成功操作后跳转项目首页
- user.js——vuex
将处理好的按钮权限更新到state中
actions中的GetButtons
//获取系统按钮
GetButtons({
commit
}) {
return new Promise((resolve) => {
getButtons(appId).then(res => {
const data = res.data || [];
commit('SET_APP_ID', appId);
commit('SET_PERMISSION', data);
resolve();
})
})
},
在GetButtons中调用getButtons接口获取项目的按钮权限,commit到mutations中的SET_PERMISSION方法,接口返回的就是当前用户有的按钮权限
mutations中的SET_PERMISSION
SET_PERMISSION: (state, permission = []) => {
let result = [];
function getCode(list) {
list.forEach(ele => {
if (typeof(ele) === 'object') {
const chiildren = ele.children;
const code = ele.code;
if (chiildren) {
getCode(chiildren)
} else {
result.push(code);
}
}
})
}
getCode(permission);
state.permissions = {};
result.forEach(ele => {
state.permissions[ele] = true;
});
storage.set(constant.permissions, state.permissions)//存到缓存里
}
处理接口返回的数据,通过递归取出每层的code字段,存到result中,遍历result,修改state中的permissions属性,并修改值为true
storage.set(constant.permissions, state.permissions)
通过导入的storage.js中的set方法,将处理好的按钮权限结果存储到缓存中对应的key中
- storage.js——公共方法
存到缓存对应的key
// 存储变量名
let storageKey = 'storage_data'
// 存储节点变量名
let storageNodeKeys = [constant.avatar, constant.name, constant.roles, constant.permissions, constant.userInfo, constant.appId]
// 存储的数据
let storageData = uni.getStorageSync(storageKey) || {}
const storage = {
set: function(key, value) {
//如果是定义好的需要存储的变量,则存入缓存
if (storageNodeKeys.indexOf(key) != -1) {
//获取当前的缓存
let tmp = uni.getStorageSync(storageKey)
//没有的话置空
tmp = tmp ? tmp : {}
//修改tmp的key为属性名,value为属性值
tmp[key] = value
//将处理好的tmp存到缓存对应的key
uni.setStorageSync(storageKey, tmp)
}
},
get: function(key) {
return storageData[key] || ""
},
remove: function(key) {
delete storageData[key]
uni.setStorageSync(storageKey, storageData)
},
clean: function() {
uni.removeStorageSync(storageKey)
}
}
在页面通过vuex获取需要的按钮权限
- getters.js
在getters.js里定义好在user.js里修改后的state属性
const getters = {
appId: state => state.user.appId,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
userInfo: state => state.user.userInfo,
signatureInfo: state => state.signature.signatureInfo
}
export default getters
- 在页面通过mapGetters获取按钮权限
在计算属性中通过mapGetters拿到所有按钮权限
computed: {
...mapGetters(['userInfo', 'permissions', 'appId']),
}
DOM中根据按钮权限判断是否展示按钮
<view class="option-group-box" v-if="canApproval || canEdit || canClose">
<view class="option-btn submite-btn" v-if="canApproval" @click="goToApproval">审批</view>
<view class="option-btn submite-btn" v-if="canEdit" @click="goToEdit">编辑</view>
<view class="option-btn submite-btn" v-if="canClose" @click="goToEdit">关闭</view>
</view>
通过权限的key拿到结果:true/false
canClose() {
return this.permissions['corrective-maintenance-close'] && ['0', '2', '4'].includes(this.pageData.auditStatus + '');
},
以上,即可判断该按钮是否展示
查看缓存里的按钮权限信息
- constant.js里定义存入缓存的字段名
const constant = {
appId: 'vuex_appId',
avatar: 'vuex_avatar',
name: 'vuex_name',
roles: 'vuex_roles',
permissions: 'vuex_permissions',
userInfo: 'vuex_userInfo'
}
export default constant
- storage.js里根据定义的字段名存入缓存
import constant from './constant'
// 存储变量名
let storageKey = 'storage_data'
// 存储节点变量名
let storageNodeKeys = [constant.avatar, constant.name, constant.roles, constant.permissions, constant.userInfo, constant.appId]
// 存储的数据
let storageData = uni.getStorageSync(storageKey) || {}
const storage = {
set: function(key, value) {
if (storageNodeKeys.indexOf(key) != -1) {
let tmp = uni.getStorageSync(storageKey)
tmp = tmp ? tmp : {}
tmp[key] = value
uni.setStorageSync(storageKey, tmp)
}
},
get: function(key) {
return storageData[key] || ""
},
remove: function(key) {
delete storageData[key]
uni.setStorageSync(storageKey, storageData)
},
clean: function() {
uni.removeStorageSync(storageKey)
}
}
export default storage
- 查看按钮权限对应字段名的信息