一、基於vue-element-admin的異步權限路由——用戶角色

第一次使用vue-element-admin這個後臺解決方案的時候，感覺是非常的舒服的，基本的後臺管理功能都能實現，唯一不是很友好的就是異步權限路由，無法靈活的進行變動。這個也是由於是演示示例，無法做到和數據庫進行交互。在使用的過程中，經過多個項目的優化，實現了基於用戶角色權限進行動態生成路由表的功能。

原解決方案異步路由：

/**
 * 異步路由
 * 需要根據用戶角色動態加載的路由
 */
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, // will always show the root menu
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'Page Permission',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          title: 'Directive Permission'
          // if do not set roles, means: this page does not require permission
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'Role Permission',
          roles: ['admin']
        }
      }
    ]
  }
]

原解決方案的異步路由主要是根據路由配置中的roles屬性中包含的角色名稱來返回該角色所擁有的路由。唯一麻煩的就是，每改一次路由的權限就需要項目打包一次，無法進行靈活的配置，在公司的項目中是無法進行使用的。

在借鑑了公司的一些項目後，對路由的權限進行了一些優化，支撐優化過程的基本數據表：

1、用戶表（user_table）

2、角色表（role_table）

3、菜單表（menu_table)

4、角色菜單關聯表（relation_tabble）

用戶表所包含的基本字段： 

userId	loginName	password	trueName	roleId	avatar
用戶id	用戶賬號	登錄密碼	真實姓名	角色id	用戶頭像

 

 

 

角色表所包含的基本字段：

roleId	roleName	roleInfo
角色id	角色名稱	角色描述信息

 

 

 

後臺管理增加用戶管理和角色管理菜單（多餘的字段可以忽略）：

1、角色管理：

2、用戶管理：

此處主要是用戶和角色關聯，其他可以忽略，一切以簡爲主。所以我們需要首先添加角色信息，在添加用戶的時候選擇角色就行。

3、添加角色：

此處可以忽略角色代碼字段。

4、添加用戶：

此處用戶角色綁定角色id（roleId）就行。

5、提供簡單think PHP代碼（不是很好，勿噴）：

5.1、添加角色

// 判斷是否存在該角色，主要根據角色名稱判斷
$res = $this->where('roleName', $params['roleName'])->find();
// 如果不存在，插入新數據
$params['roleId'] = md5(uniqid('roleId'));
$result = $this->allowField(true)->save($params);

5.2、添加用戶

// 判斷是否存在該用戶，主要判斷登錄名
$res = $this->where('loginName', $params['loginName'])->find();
// 如果不存在，插入新數據
$params['userId'] = md5(uniqid('userId'));
$params["password"] = MD5($params['loginName'] . "" . '123456');
$result = $this->allowField(true)->save($params);

添加用戶成功後，我們可以在用戶管理中看到用戶角色信息。

本篇文章結束，下篇開始菜單管理、菜單和角色關聯。