vue实现菜单权限控制

家在做后台管理系统时一般都会涉及到菜单的权限控制问题。当然解决问题的方法无非两种——前端控制和后端控制。我们公司这边的产品迭代速度较快，所以我们是从前端控制路由迭代到后端控制路由。下面我会分别介绍这两种方法的优缺点以及如何实现（不熟悉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: [
                        {