本发明涉及权限控制
技术领域：
：，具体涉及一种基于vue.js的表格按钮权限控制方法。
背景技术：
：在许多的实际应用中，不只是要求用户简单地进行注册登录，还要求不同类别的用户对资源有不同的操作权限。权限控制一般指根据系统设置的安全规则或者安全策略，用户可以访问而且只能访问自己被授权的资源，不多不少。权限控制几乎出现在任何软件系统里面，只要其涉及网络化和多用户应用。在权限的世界里服务端提供的一切都是资源，资源可以由请求方法加请求地址来描述，权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源。具体的说，前端对资源的访问通常是由界面上的按钮发起，比如删除某条数据；或由用户进入某一个页面发起，比如获取某个列表数据。这两种形式覆盖了资源请求的大部分场景，因此权限控制也可以被笼统的分成菜单权限控制和按钮权限控制。随着web技术的飞速发展，前端技术使用的比例越来越高，在整个开发项目中的比重也越来越重，后台管理系统对表格组件的使用也越来越频繁，而往往表格组件都与表格元素存在一定的耦合关系，对于每个不同的表格控制权限增加了开发人员的工作量，影响开发效率。技术实现要素：本发明的目的在于：为解决在软件开发的过程中，表格组件使用频繁而导致代码冗余的问题，提供了一种基于vue.js的表格按钮权限控制方法。本发明采用的技术方案如下：一种基于vue.js的表格按钮权限控制方法，包括以下步骤：步骤1.创建表格容器组件；步骤2.在表格容器组件中添加表格元素组件并配置表格元素组件的权限；步骤3.根据用户的权限信息和表格元素组件的权限渲染表格元素组件。进一步地，所述步骤2的具体步骤如下：步骤2.1.创建表格元素适配器；步骤2.2.在表格元素适配器中初始化表格元素组件，并给初始化的表格元素组件配置权限；步骤2.3.将表格元素组件及其配置权限作为配置信息注册到表格容器组件中。进一步地，给表格元素组件配置权限的方法为：给表格元素组件的某个属性赋予一个特定值，所述属性记作p-key，所述特定值记作p-value。进一步地，所述步骤3的具体步骤如下：步骤3.1.用户登录系统并验证用户信息，若验证通过，则读取的用户权限信息并进入步骤3.2；若验证失败，则取消对表格元素组件的渲染；步骤3.2.将用户的权限信息与所述表格元素组件的权限进行匹配，进入步骤3.3；步骤3.3.根据匹配结果进行实例化表格容器组件及表格元素组件。综上所述，由于采用了上述技术方案，本发明的有益效果是：1、本发明中，在表格容器组件中初始化表格元素组件，并对各个初始化的表格元素组件进行权限配置，通过表格容器组件将所有初始化的表格元素组件及其对应的权限作为配置信息注册到表格容器组件中。用户登录系统后，读取用户的权限信息并将其与各个表格元素组件的权限匹配，若匹配成功，则在页面中渲染该表格元素组件；若匹配失败，则不在页面中渲染该表格元素组件或使该表格元素组件呈不可控的状态。通过配置各个表格元素组件的权限，实现表格元素组件与表格容器组件的关联，使得代码易于维护，并极大地提高了表格容器组件的复用性，灵活性高。2、本发明中，基于vue.js这款轻量级又具有双向数据绑定、自定义指令、组件化开发和虚拟dom特性的渐进式框架进行开发，以整合表格容器组件和表格元素组件权限的方式，提高了代码重用的可能性，又方便后期代码维护。附图说明为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。图1为本发明的整体流程图。具体实施方式为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明，即所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。需要说明的是，术语“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。一种基于vue.js的表格按钮权限控制方法，包括以下步骤：步骤1.创建表格容器组件。表格容器组件指包裹所有表格元素组件的容器，通常指table组件。步骤2.在表格容器组件中添加表格元素组件并配置表格元素组件的权限，包括以下步骤：步骤2.1.创建表格元素适配器。表格元素适配器指所有表格元素组件的属性及共有方法的统一入口，使得所有表格元素组件对外暴露的接口均一致。步骤2.2.在表格元素适配器中初始化表格元素组件，并给初始化的表格元素组件配置权限。表格元素组件指表格中需要被权限控制的一系列按钮组件，给表格元素组件配置权限的方法为：给表格元素组件的某个属性赋予一个特定值，该属性记作p-key，该特定值记作p-value。若表格元素适配器中配置有自定义的表格元素组件，则需配置自定义的表格元素组件的权限。步骤2.3.通过表格元素适配器将表格元素组件及其配置权限作为配置信息注册到表格容器组件中。步骤3.根据用户的权限信息和表格元素组件的权限渲染表格元素组件，具体步骤如下：步骤3.1.用户登录系统并验证用户信息，若验证通过，则读取用户权限信息并进入步骤3.2；若验证失败，则取消对表格元素组件的渲染。所述系统包括但不限于电子信息产品管理系统、门诊信息管理系统和企业协同办公管理系统。验证用户信息包括但不限于验证用户的账号、密码、所属类型。验证的方式为：将用户在登录界面填写的登录信息与系统的数据库中的数据进行比对。若比对成功，即为登录成功，根据用户填写的登录信息判断用户的权限，同时，用户可进入系统内。若比对失败，即为登录失败，系统可显示用户登录失败相关的提示信息或采取其他操作。步骤3.2.将用户的权限信息与所述表格元素组件的权限进行匹配，进入步骤3.3。步骤3.3.根据匹配结果进行实例化表格容器组件及表格元素组件。用户登录成功后，根据用户的权限信息与表格容器组件中各个表格元素组件的权限进行匹配，进行匹配的内容为用户的权限信息与各个表格元素组件的p-key及p-value。若匹配成功，则在页面上渲染该表格元素组件；若匹配失败，则可不在页面上渲染该表格元素组件或将该表格元素组件设置为不可控的状态。基于vue.js这款轻量级又具有双向数据绑定、自定义指令、组件化开发和虚拟dom特性的渐进式框架进行开发，配置各个表格元素组件的权限，实现表格元素组件与表格容器组件的关联，通过整合表格容器组件和表格元素组件权限的方式，极大地提高了表格容器组件的复用性，又方便后期代码维护。实施例1本发明较佳实施例提供的一种基于vue.js的表格按钮权限控制方法，包括以下步骤：1.创建表格容器组件，即创建table组件。2.在table组件中添加表格元素组件并配置表格元素组件的权限，具体方法如下：t1.创建表格元素适配器，即创建一个名称为“permissions-config”的方法。t2.在“permissions-config”方法中初始化多个表格元素组件，即button组件。t3.对每个button组件进行权限的配置：给初始化的所有的button组件添加一个名称为“permission”的属性，该属性的值为“true”或“false”。t4.将“permissions-config”方法注册到table组件中。3.用户登录企业协同办公管理系统，将用户的权限信息与表格元素组件的权限进行匹配并渲染表格元素组件，具体方法如下：s1.用户打开企业协同办公管理系统的登录界面，填写用户名和密码，用户名记作username，密码记作userpwd，验证用户填写的信息。若验证通过，则进入步骤s2；若验证失败，则将验证失败的原因展示给用户。验证过程如下：s1.1.比对用户填写的username与企业协同办公管理系统的数据库中的用户名进行比对，若存在该用户名，则进入步骤s1.2；若不存在该用户名，则提示用户不存在该用户名，请用户重写填写用户名或注册新账号。s1.2.根据企业协同办公管理系统的数据库中的用户名为username的用户个人数据查找该用户个人数据中的密码，记作t_userpwd。若userpwd与t_userpwd相等，则使该用户进入本系统，并读取该用户个人数据中的用户权限的值，记作t_permission，进入步骤s2；若userpwd与t_userpwd不相等，则禁止该登录用户进入本系统，并提示用户密码错误，请用户重新填写密码。用户重新填写密码后，再次执行步骤s1.2。s2.根据用户的权限信息与表格元素组件的权限进行匹配，若匹配成功，则在页面中渲染该表格元素组件；若匹配失败，则不在页面中显示该表格元素组件。具体方法如下：将用户的权限的值与表格元素组件的权限的值进行匹配，即将t_permission的值与permission的值进行匹配。若t_permission的值为“true”，则渲染权限值为“true”表格元素组件在页面中，不显示权限值为“false”表格元素组件。反之，若t_permission的值为“false”，则渲染权限值为“false”表格元素组件在页面中，不显示权限值为“true”表格元素组件。用户登录成功后，用户终端可存储当前用户的信息(包括用户名、密码及权限)，用户再次登录本系统时，则根据保存的信息进行页面的渲染。切换用户并登录成功后，则将当前登录的用户的信息与表格元素组件的权限重新进行匹配，根据匹配结果重新对匹配的表格元素组件进行渲染。若用户终端可存储用户的权限信息，则该用户终端须清除之前登录的用户的信息信息并存储当前登录的用户的信息。实施例2本发明较佳实施例提供的一种基于vue.js的表格按钮权限控制方法或在实施例一的基础上，包括以下步骤：1.创建表格容器组件，即创建table组件。2.在table组件中添加表格元素组件并配置表格元素组件的权限，具体方法如下：tt1.创建表格元素适配器，即创建一个名称为“user-category”的方法。tt2.在“user-category”方法中初始化多个表格元素组件，即button组件。tt3.对每个button组件进行权限的配置：给初始化的所有的button组件添加一个名称为“category”的属性，该属性的值为“admin”或“user”。若“user-category”方法中存在自定义的表格元素组件，则还需配置自定义的表格元素组件的权限。tt4.将“user-category”方法注册到table组件中。3.用户登录电子信息产品管理系统，将用户的权限信息与表格元素组件的权限进行匹配并渲染表格元素组件，具体方法如下：ss1.用户打开电子信息产品管理系统的登录界面，填写用户名和密码并选择所属类别，所属类别即限定了用户的权限，包含管理员和标准用户两种类型，将用户名记作login_name，密码记作login_pwd，将所属类别记作login_type，验证用户填写的信息。若验证通过，则进入步骤ss2；若验证失败，则将验证失败的原因展示给用户。验证过程如下：在电子信息产品管理系统的数据库中查找是否存在同时满足用户名为login_name、用户密码为login_pwd以及用户所属类别为login_type的用户，若存在，则进入步骤ss2；若不存在，则提示用户登录信息填写有误。用户重新填写登录信息后，再次根据用户填写的登录信息和电子信息产品管理系统的数据库中的数据进行比对。ss2.根据用户的所属类别与表格元素组件的权限进行匹配，若匹配成功，则在页面中渲染该表格元素组件；若匹配失败，则不在页面中显示该表格元素组件。具体方法如下：将用户所属类别的值与表格元素组件的权限的值进行匹配，即将login_type的值与category的值进行匹配。若login_type的值为“admin”，则在页面中将权限值为“admin”表格元素组件设置为可控状态，将权限值为“user”表格元素组件设置为不可控状态。反之，若login_type的值为“user”，则在页面中将权限值为“user”表格元素组件设置为可控状态，将权限值为“admin”表格元素组件设置为不可控状态。以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。当前第1页12当前第1页12