【uni-app+vue2】通过vuex获取项目的按钮权限并存入缓存

流程图示

获取项目所有页面的按钮权限并存入vuex和缓存

1. 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方法，成功操作后跳转项目首页

2. 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中

3. 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获取需要的按钮权限

1. 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

2. 在页面通过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 + '');
},

以上，即可判断该按钮是否展示

查看缓存里的按钮权限信息

1. 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

2. 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

3. 查看按钮权限对应字段名的信息