vue实现页面权限显示_Vue + Element UI 实现权限管理系统 前端篇（十三）：页面权限控制...

权限控制方案

既然是后台权限管理系统，当然少不了权限控制啦，至于权限控制，前端方面当然就是对页面资源的访问和操作控制啦。

前端资源权限主要又分为两个部分，即导航菜单的查看权限和页面增删改操作按钮的操作权限。

我们的设计把页面导航菜单和页面操作按钮统一存储在菜单数据库表中，菜单表中包含以下权限关注点。

菜单类型

菜单类型代码页面资源的类型。类型包括，0：目录   1：菜单   2：按钮'。

权限标识

权限标识即是代表此页面资源，用来进行权限控制的唯一标识，主要是进行增删改查的权限控制。

权限标识包括，sys:user:add：新增 sys:user:edit：编辑 sys:user:delete：删除 sys:user:view：查看。

注：目前查看都可以通过菜单可见性进行控制，所以查看权限标识目前没有用上，如果需要显示无权限页面可以使用。

菜单表结构

具体的菜单表结构如下。

----------------------------------------------------菜单----------------------------------------------------Table structure for `sys_menu`--------------------------------------------------

CREATE TABLE`sys_menu` (

`id`bigint NOT NULL AUTO_INCREMENT COMMENT '编号',

`name`varchar(50) COMMENT '菜单名称',

`parent_id`bigint COMMENT '父菜单ID，一级菜单为0',

`url`varchar(200) COMMENT '菜单URL',

`perms`varchar(500) COMMENT '授权(多个用逗号分隔，如：sys:user:add,sys:user:edit)',

`type`int COMMENT '类型 0：目录 1：菜单 2：按钮',