基于vue的按钮权限控制方法、系统、设备及存储介质技术方案

本发明专利技术提出一种基于vue的按钮权限控制方法、系统、设备及存储介质，该方法包括：根据前端登录信息，获取前端页面对应的前端页面端口；根据前端页面端口和预设端口权限对应表，获取前端页面对应的按钮权限；根据前端页面对应的按钮权限，获取每一可调用按钮的预设名称；根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。通过将所有按钮权限控制的相关逻辑都维护到了同一个公共文件库中，方便进行权限的管理，提升了代码的可读性和可维护性。和可维护性。和可维护性。

【技术实现步骤摘要】
基于vue的按钮权限控制方法、系统、设备及存储介质


[0001]本专利技术涉及计算机
，尤其涉及一种基于vue的按钮权限控制方法、系统、设备及存储介质。

技术介绍

[0002]权限控制在后台管理中是一个非常常用的功能，很多后台管理系统都会按照不同职级、不同业务和不同场景等决定是否显示某个按钮。在基于vue框架的系统业务开发过程中，通常的做法都是借着v
‑
if指令，然后排列编写“||”“&&”等逻辑运算符组合的表达式判断是否“truthy”来实现按钮的权限控制。这种方式在条件简单时，比较便捷。
[0003]在条件比较复杂并且按钮较多的情况下，就容易导致表达式臃肿，代码不易理解。并且因为这种方法编写的代码散落在各个文件，开发人员代码风格各不相同，随着项目的逐渐扩大，会变得越来越难维护，成为项目的一个定时炸弹，容易导致生产问题。

技术实现思路

[0004]本专利技术提供一种基于vue的按钮权限控制方法、系统、设备及存储介质，其主要目的在于提高代码可读性，降低代码维护成本。
[0005]第一方面，本专利技术实施例提供一种基于vue的按钮权限控制方法，包括：
[0006]根据前端登录信息，获取前端页面对应的前端页面端口；
[0007]根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
[0008]根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
[0009]根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
[0010]优选地，所述公共文件库包括按钮创建函数、按钮处理函数和钩子函数，其中：
[0011]所述按钮创建函数用于根据输入的按钮名称，创建相应按钮；
[0012]所述按钮处理函数用于根据输入的按钮名称和预设显示条件，对按钮进行显示或禁用；
[0013]所述钩子函数用于根据输入的按钮名称和函数控制条件变化时，对按钮进行显示或禁用。
[0014]优选地，所述钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，其中：
[0015]所述bind钩子函数用于对输入的按钮进行属性绑定；
[0016]所述insert钩子函数用于在插入输入的按钮时，根据输入的插入条件，对按钮进行显示或禁用；
[0017]所述update钩子函数用于在更新输入的按钮时，根据输入的更新条件，对按钮进行显示或禁用。
[0018]优选地，所述前端登录信息包括用户登录信息、用户业务信息和用户场景信息。
[0019]优选地，所述根据前端登录信息，获取前端页面对应的前端页面端口，包括：
[0020]根据用户登录账号和登录密码，获取token秘钥；
[0021]根据所述token秘钥，获取所述用户业务信息和所述用户场景信息；
[0022]根据所述用户登录信息、所述用户业务信息和所述用户场景信息，结合预设端口匹配规则，获取所述前端页面端口。
[0023]优选地，所述根据所述前端页面对应的按钮权限，获取所有可调用按钮，包括：
[0024]通过vuex定义按钮调用权限状态对象，并创建按钮指令，并为每个按钮绑定一个按钮指令；
[0025]在按钮调用权限文件中，获取每一可调用按钮对应的指令值，从按钮调用权限状态对象中得到每一可调用按钮是否有权限，若有，则将每一可调用按钮作为所述可调用按钮。
[0026]优选地，所述公共文件库包括按钮显示结构体，所述按钮显示结构体包括按钮名称和显示条件。
[0027]第二方面，本专利技术实施例提供一种基于vue的按钮权限控制系统，包括：
[0028]端口模块，用于根据前端登录信息，获取前端页面对应的前端页面端口；
[0029]权限模块，用于根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
[0030]名称模块，用于根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
[0031]显示模块，用于根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
[0032]第三方面，本专利技术实施例提供一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于vue的按钮权限控制方法的步骤。
[0033]第四方面，本专利技术实施例提供一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述基于vue的按钮权限控制方法的步骤。
[0034]本专利技术提出的一种基于vue的按钮权限控制方法、系统、设备及存储介质，根据前端页面端口查找对应的权限，与权限直接关联的是前端页面端口，而不是传统意义中的用户角色，通过前端页面端口关联到权限，避免了传统方法中角色变动带来的修改，保证了代码的稳定性，并且也降低了开发难度；另外，整个按钮显示条件的判断过程都集中在功能函数内部，当需要修改条件判断过程时，只需要修改该函数中具体进行条件判断的部分代码即可，如此，即可将修改后的条件判断过程应用到整个项目中，而且避免了对整个代码进行筛查和修改的过程，从而提高了整个代码的可读性和可维护性。
附图说明
[0035]图1为本专利技术实施例提供的一种基于vue的按钮权限控制方法的应用场景示意图；
[0036]图2为本专利技术实施例提供的一种基于vue的按钮权限控制方法的流程图；
[0037]图3为本专利技术实施例提供的一种基于vue的按钮权限控制系统的结构示意图；
[0038]图4为本专利技术实施例中提供的一种计算机设备的结构示意图。
[0039]本专利技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
[0040]应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。
[0041]在本申请的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”、“顺时针”、“逆时针”、“轴向”、“周向”、“径向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本申请和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于vue的按钮权限控制方法，其特征在于，包括：根据前端登录信息，获取前端页面对应的前端页面端口；根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。2.根据权利要求1所述的基于vue的按钮权限控制方法，其特征在于，所述公共文件库包括按钮创建函数、按钮处理函数和钩子函数，其中：所述按钮创建函数用于根据输入的按钮名称，创建相应按钮；所述按钮处理函数用于根据输入的按钮名称和预设显示条件，对按钮进行显示或禁用；所述钩子函数用于根据输入的按钮名称和函数控制条件变化时，对按钮进行显示或禁用。3.根据权利要求2所述的基于vue的按钮权限控制方法，其特征在于，所述钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，其中：所述bind钩子函数用于对输入的按钮进行属性绑定；所述insert钩子函数用于在插入输入的按钮时，根据输入的插入条件，对按钮进行显示或禁用；所述update钩子函数用于在更新输入的按钮时，根据输入的更新条件，对按钮进行显示或禁用。4.根据权利要求1所述的基于vue的按钮权限控制方法，其特征在于，所述前端登录信息包括用户登录信息、用户业务信息和用户场景信息。5.根据权利要求4所述的基于vue的按钮权限控制方法，其特征在于，所述根据前端登录信息，获取前端页面对应的前端页面端口，包括：根据用户登录账号和登录密码，获取token秘钥；根据所述token秘钥，获取所述用户业务信息和所述用户场...

【专利技术属性】
技术研发人员：邓蒙，
申请(专利权)人：中国平安财产保险股份有限公司，
类型：发明
国别省市：