uniapp - vuex做权限管理

第一步：处理请求到的数据

手机端做用户权限分配，后台会给你接口返回给你一个菜单的列表，如下图中在个人信息接口返回数据里有个menu字段，里面存放的就是当前用户可以访问的有权限的页面。menu数组里是对象的形式，我们需要先把里面的控制权限的code字段给过滤出来。

过滤的方法有很多，这里我使用map对象把它存放起来

// res.data.data.menu 是我请求到将要处理的数据
let menuArr = res.data.data.menu
let map = new Map();
for (let i = 0; i < menuArr.length; i++) 
	{map.set(menuArr[i].code,menuArr[i].code);
}
// 这里我们打印一下处理好的数据如下图
console.log('map:', map);

ok！这里处理好后我们先放这里稍后再说怎么用，现在的当务之急是需要把它存放到vuex仓库里去，以便我们再项目中所有页面都可访问到。

第二步：搭建vuex仓库

在store文件夹下的index.js里写如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        // 定义变量 - 权限控制变量
        power: uni.getStorageSync('vuex-power') || {},  // 顺便配合本地存储做一下vuex状态持久化（第一步）
    },
    getters: {
        getPower:state=>{
            return state.power
        }
    },
    mutations: {
    // 这里的state是上面状态的state，val是参数-后面说在哪里传它
        setPower(state, val){
            state.power = val ? val : {}
            uni.setStorageSync('vuex-power',val) //（第二步，完事）
        }
    },
})

export default store

在你的uniapp项目的main.js里写如下代码

import store from './store/index.js'
const app = new Vue({
  ...App,
  store
})
app.$mount()

ok！到这里vuex仓库搭建好了，state里的power对象就是我们定义的将要存放权限数组的变量。

第三步：给vuex仓库里state下的power赋值

我们如何把第一步里打印的map对象存放到第二步里的state下的power身上用以全局使用呢？

// res.data.data.menu 是我请求到将要处理的数据
let menuArr = res.data.data.menu
let map = new Map();
for (let i = 0; i < menuArr.length; i++) 
	{map.set(menuArr[i].code,menuArr[i].code);
}
console.log('map:', map);

// 我们接着第一步的代码写
// 直接在这里使用下面语法赋值
this.$store.commit('setPower', map)
// 解释：'setPower'对应着store/index.js里的mutations字段里定义的setPower
// map这个数据会被传到val那里然后又赋值给了state.power
console.log('power被赋的值:', this.$store.getters.getPower);
// 这一句又打印，说明你已经把map数据存放到了vuex的状态power字段上了

第四步：使用vuex里的状态值判断页面是否是你有的权限

data(){
	return{
		power: false
	}
}
onLoad(){
	// 判断vuex仓库this.$store.getters.getPower有没有qyry这个字段，
	// 有的话进入if语句，把this.power 设置为 true
	if (this.$store.getters.getPower.get('qyry') != undefined) {
		this.power = true
	}
},

做判断就行了。

<view v-if="power">
	<button class="btn">去qyry页面</button>
</view>