本发明涉及计算机技术领域，尤其是涉及一种基于vue.js框架的页面按钮授权方法。
背景技术：
在信息系统中会根据业务的需求不同，需要设置多个角色，每个角色只能访问特定的页面及功能操作。而权限的管理控制在实际编码过程中是跟具体页面和功能有关系，页面需要对每一个访问该页面的新角色进行授权验证，判断是否能进行授权，根据判断的结果对相应角色进行授权，这样队列式的验证方式重复且在访问角色较多时容易忽略某一角色，导致权限分配出现问题。
技术实现要素：
本发明的目的就是为了克服上述现有技术存在的授权验证方式繁琐复杂的缺陷而提供一种基于vue.js框架的页面按钮授权方法。
本发明的目的可以通过以下技术方案来实现：
一种基于vue.js框架的页面按钮授权方法，包括以下步骤：
步骤s1：获取页面中的功能组件，根据所述功能组件设置组件授权信息；
步骤s2：根据所述组件授权信息对系统角色的访问权限进行角色权限信息设置；
步骤s3：系统角色访问所述页面时，所述功能组件根据所述组件授权信息对所述角色权限信息进行授权验证，若授权验证成功则开放相应功能组件的访问权限，若授权验证失败则提示相应系统角色需要所述角色权限信息；
步骤s4：所述功能组件根据所述组件授权信息对所述授权验证成功的系统角色进行按钮权限验证，若按钮权限验证成功则显示所述功能组件对应的功能按钮，若按钮权限验证失败则不显示所述功能组件对应的功能按钮。
所述页面通过模块插件扫描所述功能组件，识别所述组件授权信息并同步至授权信息数据库。
所述页面通过资源定位转化接口将所述组件授权信息并同步至所述授权信息数据库。
所述组件授权信息包括功能组件的授权标识信息和按钮权限标识信息。
所述步骤s3中进行授权验证时所述功能组件调用所述授权标识信息。
所述步骤s4中进行按钮权限验证时所述功能组件调用所述按钮权限标识信息。
所述功能组件内设有按钮权限属性值。
所述步骤s4中若组件授权信息满足所述按钮权限属性值，则按钮权限验证成功，若不满足则表示按钮权限验证失败。
所述按钮权限属性值通过vue.js自定义指令进行设置。
与现有技术相比，本发明具有以下有益效果：
1.本发明通过在页面的功能组件中设置组件授权信息，由功能组件来验证是否对访问该功能组件的系统角色进行授权，将授权工作分化到各个组件，简化了授权验证工序，提高了页面的授权验证效率。
2.本发明将原本的页面授权验证细化为组件授权验证和组件内的按钮权限验证，提供了更丰富的验证模式及其对应的服务内容，同时提高页面访问的安全性。
3.本发明通过模块插件实现组件授权信息自动维护，无需人工去把功能组件对应代码中的组件授权信息同步到权信息数据库。
附图说明
图1为本发明的流程示意图。
具体实施方式
下面结合附图和具体实施例对本发明进行详细说明。本实施例以本发明技术方案为前提进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。
如图1所示，一种基于vue.js框架的页面按钮授权方法，包括以下步骤：
步骤s1：获取页面中的功能组件，根据功能组件设置组件授权信息；
步骤s2：根据组件授权信息对系统角色的访问权限进行角色权限信息设置；
步骤s3：系统角色访问页面时，功能组件根据组件授权信息对角色权限信息进行授权验证，若授权验证成功则开放相应功能组件的访问权限，若授权验证失败则提示相应系统角色需要角色权限信息；
步骤s4：功能组件根据组件授权信息对授权验证成功的系统角色进行按钮权限验证，若按钮权限验证成功则显示功能组件对应的功能按钮，若按钮权限验证失败则不显示功能组件对应的功能按钮。
页面通过webpack自定义插件扫描功能组件，识别组件授权信息并同步至授权信息数据库。
页面通过资源定位转化接口(rest接口)将组件授权信息并同步至授权信息数据库。
组件授权信息包括功能组件的授权标识信息和按钮权限标识信息。
步骤s3中进行授权验证时功能组件调用授权标识信息。
步骤s4中进行按钮权限验证时功能组件调用按钮权限标识信息。
功能组件内设有按钮权限属性值v-auth。
步骤s4中若组件授权信息满足按钮权限属性值，则按钮权限验证成功，若不满足则表示按钮权限验证失败。
按钮权限属性值通过vue.js自定义指令进行设置。
此外，需要说明的是，本说明书中所描述的具体实施例，所取名称可以不同，本说明书中所描述的以上内容仅仅是对本发明结构所做的举例说明。凡依据本发明构思的构造、特征及原理所做的等小变化或者简单变化，均包括于本发明的保护范围内。本发明所属技术领域的技术人员可以对所描述的具体实例做各种各样的修改或补充或采用类似的方法，只要不偏离本发明的结构或者超越本权利要求书所定义的范围，均应属于本发明的保护范围。
1.一种基于vue.js框架的页面按钮授权方法，其特征在于，包括以下步骤：
步骤s1：获取页面中的功能组件，根据所述功能组件设置组件授权信息；
步骤s2：根据所述组件授权信息对系统角色的访问权限进行角色权限信息设置；
步骤s3：系统角色访问所述页面时，所述功能组件根据所述组件授权信息对所述角色权限信息进行授权验证，若授权验证成功则开放相应功能组件的访问权限，若授权验证失败则提示相应系统角色需要所述角色权限信息；
步骤s4：所述功能组件根据所述组件授权信息对所述授权验证成功的系统角色进行按钮权限验证，若按钮权限验证成功则显示所述功能组件对应的功能按钮，若按钮权限验证失败则不显示所述功能组件对应的功能按钮。
2.根据权利要求1所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述页面通过模块插件扫描所述功能组件，识别所述组件授权信息并同步至授权信息数据库。
3.根据权利要求2所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述页面通过资源定位转化接口将所述组件授权信息并同步至所述授权信息数据库。
4.根据权利要求1所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述组件授权信息包括功能组件的授权标识信息和按钮权限标识信息。
5.根据权利要求4所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述步骤s3中进行授权验证时所述功能组件调用所述授权标识信息。
6.根据权利要求4所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述步骤s4中进行按钮权限验证时所述功能组件调用所述按钮权限标识信息。
7.根据权利要求1所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述功能组件内设有按钮权限属性值。
8.根据权利要求7所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述步骤s4中若组件授权信息满足所述按钮权限属性值，则按钮权限验证成功，若不满足则表示按钮权限验证失败。
9.根据权利要求7所述的一种基于vue.js框架的页面按钮授权方法，其特征在于，所述按钮权限属性值通过vue.js自定义指令进行设置。
技术总结