Vue 菜单权限控制

components.ts

// components.js 所有的页面资源  
const Home = () => import('@/views/Home/index.vue');
const CompanyInfo = () => import('@/views/Information/components/CompanyInfo.vue');


export default {
  Home,
  CompanyInfo,
  ....

};

router.ts

import Vue from 'vue'
import VueRouter, { RawLocation }  from 'vue-router'
import Login from '../views/Login/index.vue'
import Home from '../views/Home/index.vue'
import Index from '../views/Index/index.vue'
import store from '@/store'
import { generateRoutes } from './permission'
import service from '@/service/index'
import routeMap  from "@/router/components";

/**
 * 重写路由的push方法
 */
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location: RawLocation) {
  return (<any>(routerPush.call(this, location))).catch((error: any)=> error)
}

Vue.use(VueRouter)

// 公共路由，全部角色均具有该部分路由权限
const routes = [
  {
    path: '/login',
    name: 'login',
    hidden: true,
    component: Login
  },

  {
    path: '/',
    component: Home,
    redirect: '/dashboard',
    name: '',
    iconCls: 'el-icon-s-help',
    leaf: true,
    children: [
      {
        path: '/dashboard',
        name: '首页',
        component: () => import('../views/Dashboard/index.vue')
      }
    ]
  },
  {
    path: '/',
    component: Home,
    name: '',
    iconCls: 'el-icon-star-on',
    leaf: true,
    hidden: true,  // 路由是否在侧边导航栏中显示
    children: [
      {
        name: '404页面',
        path: '/404',
        component: () => import('../views/ErrorPage/404.vue')
      }
    ]
  }
]


const router = new VueRouter({
  // mode: 'history',
  base: process.env.VUE_APP_BASE_URL,
  routes
})

const formatRoutes = function (routeData) {
  if (!routeData) {
    routeData = {
      name: 'home',
      path: '/home',
      // 组件匹配成功的话才可以访问具体的页面
      component: Home,
      children: [],
    };
  }
  dfsTransFn(routeData,(node)=>{
    node.component=routeMap[node.component]
  })
  return routeData;
};

/**
 *  深度优先遍历
 *  @params {Array} tree 树数据
 *  @params {Array} func 操作函数
 */
const dfsTransFn = (tree, func) => {
  tree.forEach((node) => {
    func(node);
    // 如果子树存在，递归调用
    if (node.children&&node.children.length) {
      dfsTransFn(node.children, func);
    }
  });
  return tree;
};

var flag = true  // 页面刷新标志

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    sessionStorage.removeItem('name');
    sessionStorage.removeItem('token');
    // 全局路由tag重置
    // store.dispatch('app/ResetRouter');
    flag = true
  }
  let name = <String>sessionStorage.getItem('name');
  if (!name && to.path !== '/login') {
    next({ path: '/login' })
  } else {
    // 该处进行动态路由生成（当页面刷新时或首次进入该系统时，生成路由）
    if (flag && to.path !== '/login') {
      // flag = false
      router['options'].routes = routes
      // 根据登录角色生成动态路由
      //let generateAsyncRoutes = generateRoutes(asyncRoutes, <string>sessionStorage.getItem('name'))
      service.getAuths({name:name}).then(res => {
        flag = false;
        router['options'].routes = routes
        let {code, msg, data} = res
        if (code==0){
          const menuData =data
          // sessionStorage.setItem('menuData', JSON.stringify(menuData));
          var routeData = formatRoutes(menuData);
          // console.log("==routeData:",routeData)
          router.addRoutes(routeData.concat([
            {path:'*',redirect: '/404'}]));
          router['options'].routes = router['options'].routes.concat(routeData)
          // @ts-ignore
          // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          next({ ...to, replace: true })
        } else {
          flag = true;
        }
      })
     } else {
      // 以下部分为向全局变量中添加路由历史，形成tag标签
      if (to.path !== '/login') {
        let newPath = {
          name: to.name,
          path: to.fullPath
        }
        // 向全局变量中添加路由
        // store.dispatch("app/AddRouter", newPath)
      }
      next()
    }
  }
});

export default router

后端返回数据格式

[
    {
      "id": 1,
      "path": "/company",
      "component": "Home",
      "name": "企业信息",
      "iconCls": "el-icon-news",
      "leaf": false,
      "hidden": false,
      "pid": 0,
      "children": [
        {
          "id": 2,
          "path": "/companyinfo",
          "component": "CompanyInfo",
          "name": "企业信息查询",
          "iconCls": "el-icon-search",
          "leaf": true,
          "hidden": false,
          "pid": 1,
          "children": null
        },
        {
          "id": 3,
          "path": "/taxcompanyimport",
          "component": "TaxCompanyImport",
          "name": "税务企业导入",
          "iconCls": "el-icon-upload",
          "leaf": true,
          "hidden": false,
          "pid": 1,
          "children": null
        },
        {
          "id": 4,
          "path": "/taxcompanyquery",
          "component": "TaxCompanyQuery",
          "name": "税务企业查询",
          "iconCls": "el-icon-mobile",
          "leaf": true,
          "hidden": false,
          "pid": 1,
          "children": null
        }
      ]
    }
  ]