uniapp - vuex做权限管理

小清柑

已于 2022-04-20 15:41:29 修改

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： html

于 2021-09-04 15:34:21 首次发布

本文链接：https://blog.csdn.net/weixin_48940933/article/details/120099373

uni-app 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在手机端使用Vue.js和Vuex进行用户权限分配。首先，从后台接口获取权限菜单列表，并通过Map对象过滤出code字段。接着，搭建Vuex仓库，定义state中的power变量用于存储权限信息，并利用Vuex的mutations进行状态持久化。然后，将处理后的权限数据存入Vuex的state.power，并在onLoad中通过getter方法获取并判断用户是否有访问特定页面的权限。最后，根据权限值决定是否显示相应页面的按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

手机端做用户权限分配，后台会给你接口返回给你一个菜单的列表，如下图中在个人信息接口返回数据里有个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>