uniapp

2024-02-02 16:10| 来源: 网络整理| 查看: 265

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

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

// res.data.data.menu 是我请求到将要处理的数据 let menuArr = res.data.data.menu let map = new Map(); for (let i = 0; i 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 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 } },

做判断就行了。

去qyry页面

【本文地址】

公司简介

联系我们