Vue如何编写实现菜单权限控制的长尾词？

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

在后台管理系统操作时，经常遇到菜单权限控制问题。解决此问题的方法主要有两种——前端控制和后端控制。随着我们公司产品更新迭代速度快，我们更注重从前端控制路径。

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

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

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