vue-element-admin-template 權限控制整理

最新推荐文章于 2025-04-23 07:25:41 发布

原创

最新推荐文章于 2025-04-23 07:25:41 发布 · 置顶 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue-element-admin

本文详细介绍了如何在vue-element-admin模板中实现权限控制。通过登录获取的token得到用户角色，动态计算并加载对应权限的路由。使用vuex全局管理数据和操作，结合mock数据在mock/role/routes.js中设置角色路由，在api/role.js中处理角色API请求。在router/index.js中配置动态路由和权限，在store/permission.js中匹配用户权限和路由权限，以及在utils/permission.js中进行路由权限比较。最后在sidebar/index.vue中更新计算属性完成权限控制设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-element-admin是個強大的管理後台框架

https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive

經過了一些琢磨，終於知道vue-element-admin-template如何增加權限控制

首先，先把邏輯關係理清楚：

登錄後通過token獲取用戶對應的角色role，動態的根據用戶role算出其對應的有權限的路由，通過rotuer.addRoutes動態加載這些路由

數據和操作通過vuex全局管理控制

如果繼續用mock模擬數據，那麼需要在mock增加role數據route.js 動態路由和通用路由

mock/role/routes.js

//通用路由
export const constantRoutes = [
  
  {
    path: '/login',
    component: 'views/login/index',
    hidden: true
  },
  {
    path: '/404',
    component: 'views/error-page/404',
    hidden: true
  },
  {
    path: '/401',
    component: 'views/error-page/401',
    hidden: true
  },
  {
    path: '',
    component: 'layout/Layout',
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: 'views/dashboard/index',
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  },
  
]

//動態路由
export const asyncRoutes = [
  {
    path: '/nested',
    component: 'layout/Layout',
    redirect: '/nested/menu1/menu1-1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        component: 'v

最低0.47元/天解锁文章