一、基于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);

添加用户成功后，我们可以在用户管理中看到用户角色信息。

本篇文章结束，下篇开始菜单管理、菜单和角色关联。