权限管理
使用到vuex来管理用户状态信息,拦截判断登录状态,存储用户可访问菜单id
这个项目是根据后台返回的用户可访问的id来判断用户是否有权限来更改这个页面
首先看一下后台返回的数据格式,一维数组需要我们把数据进行排序递归成树状结构
使用递归算法动态渲染不定层级的菜单,生成树形结构
function menusHandler(data) {
let menu = [];
let map = {};
//乱序先进行排序
data.sort((a, b) => a.parent_id - b.parent_id);
//利用对象的性质存储父节点与子节点的映射关系
data.forEach(resource => {
resource.children = [];
map[resource.id] = resource;
if (resource.parent_id == 0) { // 0 是顶层数据
resource.show = false;
menu.push(resource);
} else {
if (map[resource.parent_id]) {
resource.show = false;
map[resource.parent_id].children.push(resource)
} else {
// throw new Error(`当前循环的数据parent_id=${resource.parent_id}有错误`);
}
}
})
console.log(menu);
return menu
}
建立一个自定义组件MenuItem
<template>
<div class="menu">
<ul class="back" v-for="(item,index) in data" :key="index">
<li class="child" @click="goa(item.id,index,data)">{{item.name}}</li>
<MenuItem v-if="item.show&&item.children" :data="item.children">
</MenuItem>
</ul>
</div>
</template>
<script>
import {
ref,
} from "vue";
export default {
name: "MenuItem",
props: {
data: Object
},
setup(props, {emit}) {
const even = ref('')
function goa(e, l, data) {
var one = sessionStorage.getItem('msd')
var list = [];
var add = [];
var val = '';
add = one.split(',');
Array.prototype.contains = function(e) {
for (var i = 0; i < add.length; i++) {
if (add[i] == e) {
return true;
}
}
return false;
}
if (add.contains(e)) {
if (data[l].show == false) {
data[l].show = true
val = '有权限'
} else {
data[l].show = false
}
} else {
val = '没有权限'
}
even.value = val
let param = {
contents: even.value
}
emit('goa', param)
}
return {
even,
goa,
}
}
}
</script>
<style>
</style>
在父组件中调用
<MenuItem :data="result" @goa="fun"></MenuItem>
{{even}}
import MenuItem from "../components/MenuItem.vue"; //引用子组件
export default {
components:{
MenuItem,
},
setup() {
const even = ref('')
function fun(val){ //接收子组件传过来的值
even.value = val.contents
}
}