vue项目处理菜单权限
第一种：后台直接返回菜单数据，例如:
menuList:[
{
path:'/home',
icon:'icon home',
title:'首页'
},
{
path:'/table',
icon:'icon table',
title:'表单'
},
...
]
数据返回后，直接拿到el-menu中去遍历（个人使用的elementUI）
<el-menu
:default-active="routh"
router
:collapse="isCollapse"
class="el-menu-vertical-demo"
:unique-opened="true"
>
<template v-for="(item, index) in menuList">
<template v-if="item.childMenuList">
<el-submenu :index="index + 'index'" :key="index">
<template slot="title">
<i :class="item.menuIcon" class="icon iconfont"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item
v-for="(it, d) in item.childMenuList"
:key="d"
:index="it.menuPath"
class="child_menu"
:class="{ long_font: it.menuName.length > 6 }"
>{{ it.menuName }}</el-menu-item
>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.path" :key="index" class="main-menus">
<i :class="item.menuIcon" class="icon iconfont"></i>
<span slot="title">{{ item.menuName }}</span>
</el-menu-item>
</template>
</template>
</el-menu>
关于权限问题，在不同登录者的权限下，返回不同的菜单信息，不影响展示
注意：以上的数组仅做参考，具体按照后端返回数据处理，前提是数据格式跟示例类似
第二种：后端返回的数据格式与正常路由中的格式差距过大，例如：
[
{'admin':'shopDetail'},
{'admin':'home'},
{'user':'userInfo'},
{'aaa','bbb'}
...
]
类似这种，个人暂时的处理方案为以下几个点：
先定义一个菜单数组menuList，menuList中写入仅通过不同权限进入的所有页面
在menuList中添加用户返回的菜单数据的相关信息，可以用key:value的形式（假设返回的菜单数据为returnMenuList）
-
通过menuList与returnMenuList进行比较，得到最终展示到页面上的菜单lastMenuList
//数据仅供参考，具体按照实际业务逻辑及后端返回数据为准 //假设只有三个页面 const menuList=[ { path:'home', icon:'icon home', title:'首页', menuName:'bbb', //后端返回的菜单对应首页 }, { path:'one', icon:'icon one', title:'页面1', menuName:'aaa', //后端返回的菜单对应页面1 }, { path:'two', icon:'icon two', title:'页面2', menuName:'abc', //后端返回的菜单对应页面2 }, ] //后端返回的用户菜单信息 let returnMenuList=[ {'aaa':'a'}, //a代表页面1 {'bbb':'home'}, //b代表页面首页 ] //比较menuList 与 returnMenuList 得到lastMenuList //再将lastMenuList展示到页面上注意：该方法不展示用户没有该权限的页面，但是能通过路由进去，此时需要添加一个判断
let map = new Map(Object.entries(returnMenuList)); let menus = menuList.filter(item => { if (map.has(item.menu)) { return item.menu } }) /**根据权限匹配输入框路由是否有权限访问 */ let some = menus.some((r) => { return r.path === this.routh //在created中添加 this.routh=this.$route.path }) if (!some) { this.$router.replace('/404') }
有更好的处理权限方法欢迎小伙伴留言哦~
