大家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现（不熟悉vue-router API的同学可以先去官网看一波API哈）。
我先简单说下项目的需求：如下图所示，有一级菜单和二级菜单，然后不同的人登录进去会展示不同的菜单。
前端控制路由的思路：将所有的路由映射表都拿到前端来维护，就是我的router.js里面将所有的菜单path与对应的components全部写进去，后面我会提到全部写进去的弊端。然后我的左侧菜单写成一个组件（sidebar.vue），在这个组件里写一份类似这样的data数据，然后通过登录时获取的level值来给data中固定的菜单加hidden，然后前端就根据hidden展示菜单。
// router.js 伪代码
const Login = r => require.ensure([],()=>r(require('../page/login/Login.vue')),'login'); const Home = r => require.ensure([],()=>r(require('../page/Home.vue')),'home'); const Forbidden = r => require.ensure([],()=>r(require('../page/403.vue')),'forbidden'); const NotFound = r => require.ensure([],()=>r(require('../page/404.vue')),'notfound'); const Dashboard = r => require.ensure([],()=>r(require('../page/dashboard/Dashboard.vue')),'dashboard'); const SplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/SplashScreen.vue')),'splashScreen'); const AddSplashScreen = r => require.ensure([],()=>r(require('../page/splashScreen/AddSplashScreen.vue')),'addSplashScreen'); const routes = [ { path: '/', redirect: '/login' },{ path: '/login', component: Login },{ path: '/404', component: NotFound },{ path: '/home', component: Home, redirect: '/home/splashScreen', children: [ { path: '/home/splashScreen', component: SplashScreen, meta: { title: '闪屏广告配置' } },{ path: '/home/addSplashScreen', component: AddSplashScreen, meta: { title: '新增闪屏广告' } } ] } ];
下面是菜单组件的伪代码
// sidebar.vue<template> <div class="sidebar"> <el-menu> ... </el-menu> </div></template><script> export default { data() { return { routes: [ { index: '1', title: '广告管理', icon: 'iconfont icon-guanggao', children: [ { index: 'splashScreen', title: '闪屏广告配置', children: [] }, ] }, { index: '2', title: '推送管理', icon:'iconfont icon-tuisongguanli-', } ] } }, methods: { getLevel(){ const level = sessionStorage.getItem('level'); if(level === '0'){ this.routes.forEach(function(value){ if(value.title == "车机管理"){ value.hidden = true; value.children.forEach(function(value){ if(value.title=="车机解绑"){ value.hidden = true; } }) } }) }else if(level === '1'){ this.routes.forEach(function(value){ value.hidden = true value.children.forEach(function(value){ value.hidden = true; }) }) } } }, created(){ this.getLevel(); } } </script>
虽然说这样可以实现权限功能，但有两个问题。
1. session里存的是level，我们可以打开浏览器控制台人为控制level，这样就失去了权限的意义。
2. 我们如果记住了path，可以直接在浏览器网址栏中手动输入path，然后回车就可以看到任何页面。这也是前端router.js写死所有路由的弊端。
在这里面前端只是通过后端传回的level来给router显示/隐藏，这样前端维护整个路由是比较复杂的而且是有重大隐患的。
