如何用Vue编写示例代码实现菜单权限控制？

本文共计2007个文字，预计阅读时间需要9分钟。

在实施后台管理系统时，家人们常遇到涉及菜单权限控制的问题。解决这类问题的方法主要有两种——前端控制和后端控制。鉴于我们公司产品迭代速度快，我们更倾向于从前端控制入手。

大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现（不熟悉vue-router API的同学可以先去官网看一波API哈）。

我先简单说下项目的需求：如下图所示，有一级菜单和二级菜单，然后不同的人登录进去会展示不同的菜单。

前端控制路由的思路：将所有的路由映射表都拿到前端来维护，就是我的router.js里面将所有的菜单path与对应的components全部写进去，后面我会提到全部写进去的弊端。然后我的左侧菜单写成一个组件（sidebar.vue），在这个组件里写一份类似这样的data数据，然后通过登录时获取的level值来给data中固定的菜单加hidden，然后前端就根据hidden展示菜单。