vue 动态路由 从而实现控制权限管理

admin管理员组

文章数量:1532324

公司的管理框架权限控制是针对某个自定义的角色，没有固定的角色名称，所以下面的代码主要是针对添加角色时，保存的菜单id;

自定义菜单，菜单即是一个路由页面，每个菜单都有自己唯一的id,所以创建角色的时候，赋予相对应的权限，只需要保存赋予菜单权限的id即可；

保存时，直接跟后台同事沟通，直接保存菜单id即可；

一、router文件夹下的index.js是项目总路由入口

index.js对模块注册后默认将constantRoutes无权限的路由增加进去，

在store/modules/permission.js中维护静态+动态路由权限，并在根目录下的permission.js实现导航守卫逻辑，

在/router/index.js中：

import VueRouter from 'vue-router';

//constantRoutes 是静态路由，不需要动态权限判断
export const constantRoutes = [
  {
    path: '/',
    component: resolve => require(['@/pages/layout/index.vue'], resolve),
    children: [
      {
        path: '/',
        name: 'homePage',
        component: resolve =>
          require(['@/pages/homePage/homePage.vue'], resolve),
        meta: {
          title: '首页'
        },
        useLayout: true
      },
      {
        path: '/demo',
        name: 'demo',
        component: resolve =>
          require(['@/pages/basic/demo.vue'], resolve),
        meta: {
          title: '测试'
        },
        useLayout: true
      },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: resolve =>
      require(['@/pages/login/login.vue'], resolve),
    meta: {
      title: '登录'
    },
    useLayout: true
  },
]
//asyncRoutes 是动态路由，需要动态权限判断
export const asyncRoutes = [
  {
    path: '/',
    component: resolve => require(['@/pages/layout/index.vue'], resolve),
    children: [
      {
        path: '/role',
        name: 'role',
        component: resolve =>
          require(['@/pages/system/role.vue'], resolve),
        meta: {
          title: '角色管理'
        },
        useLayout: true
      },
      {
        path: '/menuManager',
        name: 'menuManager',
        component: resolve =>
          require(['@/pages/system/menuManager.vue'], resolve),
        meta: {
          title: '菜单管理'
        },
        useLayout: true
      },
      {
        path: '/workers',
        name: 'workers',
        component: resolve =>
          require(['@/pages/system/workers.vue'], resolve),
        meta: {
          title: '用户管理'
        },
        useLayout: true
      },
      {
        path: '/demo2',
        name: 'demo2',
        component: resolve =>
          require(['@/pages/basic/demo2.vue'], resolve),
        meta: {
          title: '测试2'
        },
        useLayout: true
      },
    ]
  }
]
 
const createRouter = () => new VueRouter({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})
 
const router = createRouter()
 
// Detail see: https://github/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.ma

本文标签： 路由权限动态vue