一、根据后台返回的不同菜单权限,实现不同的菜单展示。如:图一是后台返回给我的一个包含主页权限的menuList列表,然后我们要把图一的列表处理成我们想要的格式的列表,如图二为了方便处理我是按照vue-router格式进行处理的。
图一(处理前数据):
图二(处理后数据):
二、
1.以下代码是处理权限列表数据,我是把它写在utils的公共文件内作为公共代码来使用,也可以写在mutation里面,然后存入localstorage防止页面重新加载后数据丢失问题。
util.mapMenuList = function (info) {
let list = JSON.parse(JSON.stringify(info));
info.map((item, index) => {
list[index] = {
path: item.url,
title: item.name,
name: item.title,
component: Main,
children: item.menuDto.map(child => {
return {
path: child.url.split('/').slice(2).join(''),
title: child.name,
name: child.title,
component: () => import('../views' + item.url + '/' + child.url.split('/').slice(2).join('') + '/' +child.url.split('/').slice(2).join('') + '.vue')
}
})
}
router.options.routes.push(list[index])//不是响应式,需手动注入路由,否则this.$router.options.routes内即便进行了addRoutes页不会显示路由列表
})
router.addRoutes(list);
window.localStorage.setItem('initList', JSON.stringify(list));//把处理好的数据存入localstorage
}
2.数据处理好之后在登录组件内进行调用,因为我们要在登录的时候就把处理好的数据存入localstorage。
methods: {
handleSubmit() {
this.$refs.loginForm.validate(valid => {
if (valid) {
const params = this.$qs.stringify(this.form);
this.$axios.post("/loan/home/login", params).then(info => {
const {data, code, codeMessage} = info.data;
this.$store.commit("clearAllTags");
if (code === 1) {
const {user, menuList, role} = data;
this.$cookie.set("user", user.name);
this.$cookie.set("userInfo", user);
this.$cookie.set("role", role);
this.$localStorage.set("menuList", JSON.stringify(menuList));//把从后台获取到的权限路由存入本地缓存
util.mapMenuList(menuList);//调用数据处理函数
let route = JSON.parse(window.localStorage.getItem('initList'));
if (route[0].name === 'home') {//判断登录权限是否有主页权限,有的的话登录之后跳到主页,否则跳到欢迎登陆页
this.$router.replace({
path: '/home'
});
} else {
this.$router.replace({
path: '/welcome'
});
}
} else {
this.$Message.warning(codeMessage);
}
});
}
});
},
},
三、数据存好之后我们就可以在组件内进行调用,循环遍历数据进行显示就ok了。
1.从localstorage取数据
mounted() {
this.routeList = JSON.parse(localStorage.getItem("initList"));
},
2.遍历数据进行显示
<Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto" z
@on-select="changeMenu">
<template v-for="item in routeList">
<MenuItem v-if="item.children.length<=1" :name="item.name" :key="'menuitem' + item.name">
<span class="layout-text" :key="'title' + item.name">{{ item.title }}</span>
</MenuItem>
<Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">
<template slot="title">
<span class="layout-text">{{ itemTitle(item) }}</span>
</template>
<template v-for="child in item.children">
<MenuItem :name="child.name" :key="'menuitem' + child.name">
<span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
</MenuItem>
</template>
</Submenu>
</template>
</Menu>
3.左侧是处理好以后显示的列表
四、还有一个问题就是我们在退出登录的时候要清空所有数据的缓存,包括所有路由以及vuex状态管理里面的数据,否则下次登录的时候会有上次登录的路由缓存信息。我的处理是在退出登录的时候进行页面刷新让整个页面重载一次就ok了
logout(state, vm) {
Cookies.remove('user');
Cookies.remove('password');
Cookies.remove('access');
localStorage.clear();
window.location.reload();//刷新页面重载
}