基于vue的按钮权限控制方法、系统、设备及存储介质与流程

1.本发明涉及计算机技术领域，尤其涉及一种基于vue的按钮权限控制方法、系统、设备及存储介质。


背景技术：

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


技术实现要素：

4.本发明提供一种基于vue的按钮权限控制方法、系统、设备及存储介质，其主要目的在于提高代码可读性，降低代码维护成本。
5.第一方面，本发明实施例提供一种基于vue的按钮权限控制方法，包括：
6.根据前端登录信息，获取前端页面对应的前端页面端口；
7.根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
8.根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
9.根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
10.优选地，所述公共文件库包括按钮创建函数、按钮处理函数和钩子函数，其中：
11.所述按钮创建函数用于根据输入的按钮名称，创建相应按钮；
12.所述按钮处理函数用于根据输入的按钮名称和预设显示条件，对按钮进行显示或禁用；
13.所述钩子函数用于根据输入的按钮名称和函数控制条件变化时，对按钮进行显示或禁用。
14.优选地，所述钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，其中：
15.所述bind钩子函数用于对输入的按钮进行属性绑定；
16.所述insert钩子函数用于在插入输入的按钮时，根据输入的插入条件，对按钮进行显示或禁用；
17.所述update钩子函数用于在更新输入的按钮时，根据输入的更新条件，对按钮进行显示或禁用。
18.优选地，所述前端登录信息包括用户登录信息、用户业务信息和用户场景信息。
19.优选地，所述根据前端登录信息，获取前端页面对应的前端页面端口，包括：
20.根据用户登录账号和登录密码，获取token秘钥；
21.根据所述token秘钥，获取所述用户业务信息和所述用户场景信息；
22.根据所述用户登录信息、所述用户业务信息和所述用户场景信息，结合预设端口匹配规则，获取所述前端页面端口。
23.优选地，所述根据所述前端页面对应的按钮权限，获取所有可调用按钮，包括：
24.通过vuex定义按钮调用权限状态对象，并创建按钮指令，并为每个按钮绑定一个按钮指令；
25.在按钮调用权限文件中，获取每一可调用按钮对应的指令值，从按钮调用权限状态对象中得到每一可调用按钮是否有权限，若有，则将每一可调用按钮作为所述可调用按钮。
26.优选地，所述公共文件库包括按钮显示结构体，所述按钮显示结构体包括按钮名称和显示条件。
27.第二方面，本发明实施例提供一种基于vue的按钮权限控制系统，包括：
28.端口模块，用于根据前端登录信息，获取前端页面对应的前端页面端口；
29.权限模块，用于根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
30.名称模块，用于根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
31.显示模块，用于根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
32.第三方面，本发明实施例提供一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于vue的按钮权限控制方法的步骤。
33.第四方面，本发明实施例提供一种计算机存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述基于vue的按钮权限控制方法的步骤。
34.本发明提出的一种基于vue的按钮权限控制方法、系统、设备及存储介质，根据前端页面端口查找对应的权限，与权限直接关联的是前端页面端口，而不是传统意义中的用户角色，通过前端页面端口关联到权限，避免了传统方法中角色变动带来的修改，保证了代码的稳定性，并且也降低了开发难度；另外，整个按钮显示条件的判断过程都集中在功能函数内部，当需要修改条件判断过程时，只需要修改该函数中具体进行条件判断的部分代码即可，如此，即可将修改后的条件判断过程应用到整个项目中，而且避免了对整个代码进行筛查和修改的过程，从而提高了整个代码的可读性和可维护性。
附图说明
35.图1为本发明实施例提供的一种基于vue的按钮权限控制方法的应用场景示意图；
36.图2为本发明实施例提供的一种基于vue的按钮权限控制方法的流程图；
37.图3为本发明实施例提供的一种基于vue的按钮权限控制系统的结构示意图；
38.图4为本发明实施例中提供的一种计算机设备的结构示意图。
39.本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
40.应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
41.在本技术的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“长度”、“宽度”、“厚度”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”、“顺时针”、“逆时针”、“轴向”、“周向”、“径向”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本技术的限制。
42.此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本技术的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
43.图1为本发明实施例提供的一种基于vue的按钮权限控制方法的应用场景示意图，如图1所示，用户在客户端输入前端登录信息，客户端获取到前端登录信息后，将该前端登录信息发送给服务端，服务端接收到该前端登录信息后，执行该一种基于vue的按钮权限控制方法。
44.需要说明的是，服务端可以用独立的服务器或者是多个服务器组成的服务器集群来实现。客户端可为智能手机、平板电脑、笔记本电脑、台式计算机等，但并不局限于此。客户端和服务端可以通过蓝牙、usb(universal serial bus，通用串行总线)或者其他通讯连接方式进行连接，本发明实施例在此不做限制。
45.vue是目前最火的的一个前端框架，是三大主流前端框架之一，一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目，vue可以提供一套构建用户界面的框架，只关注视图层，易上手，有配套的第三方类库。通过vue的使用可以提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
46.在许多实际应用中，不只是简单的要求用户进行登录注册，还要求不同类型用户对不同资源有不同的操作权限，在一个大企业内部，往往是按照不同的项目对一些共享的资料、文件、代码等进行分类，高层领导可以访问所有项目资料，而普通职工只能访问自己所在项目的资料，因此，对不同情况进行权限控制是十分有必要的。
47.目前的vue开发系统中，如果要实现基于不同条件控制按钮显示或者禁用的功能，通常的做法是借助v-if指令，然后编写条件表达式来进行控制，这种方法在条件简单并且按钮比较少的情况下，还能适用，但是在条件比较复杂，且按钮比较多的场景下，对代码中每一处涉及到的条件都需要进行测试和核实，即使有些是重复的代码，这样既增加了员工
的工作量，又导致代码的可读性、可维护性大大降低。针对该问题，图2为本发明实施例提供的一种基于vue的按钮权限控制方法的流程图，如图2所示，该方法包括：
48.s210，根据前端登录信息，获取前端页面对应的前端页面端口；
49.首先用户在前端网页的登录页面中输入账号密码等信息，如果用户是首次登录该系统，需要先进行注册，在注册过程中需要填写用户的账号、工号、职位、工龄、级别、所处项目等信息，并将这些注册信息与用户工号相对应的存储起来。再后续用户登录前端网页的过程中，根据该用户的账号在存储器中进行查找，查找到与该用户相对应的前端登录信息，并根据该前端登录信息找到对应的前端页面和前端页面端口。本发明实施例中的前端登录信息可以是用户工号、用户账号、用户业务信息、业务场景信息等中的一个或者多个组合，具体可以根据实际情况进行确定，本发明实施例对此不做具体限定。
50.本发明实施例中前端页面即为进行开发的网页页面，在该网页页面中，需要布置一些按钮组件，在使用目前最主流的前端框架vue在开发过程中，按钮组件是一个非常重要的组成部分，可以这么说，所有的vue应用，都是由一个一个的小组件拼装而成的，正是由于vue按钮组件如此重要，所以vue的生态中，也非常多的ui组件库，其中最著名的非element-ui莫属，里面有非常多的封装完善的组件提供使用，大大的增强了开发效率。在有些按钮组件开发的过程中，有些按钮组件需要显示，而有些按钮组件需要隐藏，具体要根据当前条件进行确定。
51.s220，根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
52.然后根据前端页面端口和预设端口权限对应表，查找到该前端页面端口对应的按钮权限。通常地，该预设端口权限对应表中预先记录了每个端口对应的权限，权限可以按照不同粒度进行划分，比如可以按照粗粒度进行划分，将权限分为高权限、中权限和低权限，不同权限对应的端口不同，当不同端口对应的权限敏感性不太高时，可以使用粗粒度对端口进行划分，这样即使某些时候端口发生了变化，也不会太影响到对应的权限；也可以按照细粒度进行划分，将权限分为一级权限、二级权限、三级权限、四极权限和五级权限，不同权限对应的端口不同，而当划分粒度比较细时，适合需要严格保密的项目资料，对没有访问权限的用户，一律不让访问；具体根据实际情况进行确定，本发明实施例对此不做具体限定。
53.本发明实施例中根据前端页面端口查找对应的权限，与权限直接关联的是前端页面端口，而不是传统意义中的用户角色，传统的用户角色与权限关联，即需要根据用户角色来进行权限划分，但是在现有技术中公司内部的岗位比较模糊，从而导致角色权限模糊；再者，如果将用户角色划分的很细，但是随着公司业务变动，也会导致用户角色频繁变动，这样就需要经常修改与用户角色相对应的权限，并不是十分方便。本发明实施例中，通过端口关联到权限，避免了传统方法中角色变动带来的修改，保证了代码的稳定性，并且也降低了开发难度。
54.s230，根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
55.接着获取该前端页面对应的按钮权限，得到该页面所有可以调用的按钮，即可调用按钮，可调用按钮就是在该权限下前端页面能够调用的按钮，可调用按钮的具体情况和数量是与按钮权限相对应的，不同的按钮权限对应的可调用按钮一般不同，具体可以根据
实际情况进行确定，本发明实施例对此不做具体限定。然后根据每个可调用按钮和按钮名称对应表，得到每个可调用按钮的预设名称，本发明实施例中，每个按钮的名称是预先设置好的，目的是为了保持和公共文件库中用到的按钮名称保持一致，防止程序运行时出错；本发明实施例中按钮名称对应表根据按钮某个唯一属性和按钮名称相对应进行存储，在利用按钮名称对应表查找每个可调用按钮的名称时，可以单独针对一个可调用按钮挨个在按钮名称对应表中进行查找，找到当前可调用按钮的预设名称后，再按照相同的方法查找下一个可调用按钮的名称，如此循环，找到所有可调用按钮的预设名称即可；也可以是利用折半查找方法，从中间开始查找，具体过程本发明实施例在此不再赘述。
56.s240，根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
57.然后根据每个可调用按钮的预设名称和每个可调用按钮的当前显示条件，调用公共文件库中的相应函数，具体地，本发明实施例中的公共文件库中包含所有与按钮相关的功能函数，比如创建函数、初始化函数、编译函数、更新函数、挂载函数、显示函数和卸载函数等等，将这些功能函数放在该公共文件库中，当需要使用的时候，可以直接从该公共文件库中获取，而不需要自己重新进行编写；需要特别说明的是，该功能函数中包含按钮显示条件，所有的功能函数中，其输入中包含按钮名称和当前按钮显示条件，输出可以根据功能函数的具体功能进行确定，比如显示函数，当向该显示函数输入按钮名称和当前显示条件后，该显示函数会根据输入的当前显示条件，进行一系列的条件判断，最终返回一个值来表示是否显示该按钮，比如返回1表示要显示该按钮，返回0表示禁用该按钮，整个条件的判断过程都集中在该函数内部，当需要修改条件判断过程时，只需要修改该函数中具体进行条件判断的部分代码即可，如此，即可将修改后的条件判断过程应用到整个项目中，而且避免了对整个代码进行筛查和修改的过程，从而提高了整个代码的可读性和可维护性。
58.本发明实施例提供一种基于vue的按钮权限控制方法，根据前端页面端口查找对应的权限，与权限直接关联的是前端页面端口，而不是传统意义中的用户角色，通过前端页面端口关联到权限，避免了传统方法中角色变动带来的修改，保证了代码的稳定性，并且也降低了开发难度；另外，整个按钮显示条件的判断过程都集中在功能函数内部，当需要修改条件判断过程时，只需要修改该函数中具体进行条件判断的部分代码即可，如此，即可将修改后的条件判断过程应用到整个项目中，而且避免了对整个代码进行筛查和修改的过程，从而提高了整个代码的可读性和可维护性。
59.在上述实施例的基础上，优选地，所述公共文件库包括按钮创建函数、按钮处理函数和钩子函数，其中：
60.所述按钮创建函数用于根据输入的按钮名称，创建相应按钮；
61.所述按钮处理函数用于根据输入的按钮名称和预设显示条件，对按钮进行显示或禁用；
62.所述钩子函数用于根据输入的按钮名称和函数控制条件变化时，对按钮进行显示或禁用。
63.具体地，本发明实施例中的公共文件库包括按钮创建函数、按钮处理函数和钩子
函数三部分，本发明实施例中的按钮创建函数是指利用vue中自带的软件系统功能，创建一个函数，比较常见的是直接用new函数进行创建；按钮处理函数是指对按钮实现禁用或者显示的功能，按钮处理函数的输入为按钮名称和按钮显示条件，当按钮处理函数接收到按钮名称和按钮显示条件后，将该按钮显示条件按照程序中的判断过程进行执行，最后输出某个值，通过该值来表示是否对该按钮进行显示或者禁用。
64.在具体实施过程中，定义一个变量对象enable_el_to_show，以按钮名称变量作为key，条件作为value，其中value也是一个对象，对象中包含一个名为when的函数，以与按钮控制相关条件为输入参数，输出条件组合后计算出的boolean值，这个函数的意思就是“当”(when)什么条件下显示按钮，符合返回true，如果不符合，就会返回false。该变量enable_el_to_show的结构示例如下：
[0065][0066]
从上面的结构体中可以看到，when后面连接的就是显示条件的判断，只要当满足该条件，就会返回相应的值。
[0067]
钩子函数是指vue实例从创建到销毁过程中自动执行的函数，就是在生命周期执行流程中预留的一个能让执行开发者自己代码的地方。叫钩子函数，就是挂载自己的东西，常见的钩子函数包括生命周期钩子函数、自定义指令钩子函数和路由导航钩子函数等，比如watch、computed这些也属于钩子函数，watch是在监控的数据变化时就会自动执行对应的方法，而computed是在数据变化时再次计算数据。
[0068]
在上述实施例的基础上，优选地，所述钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，其中：
[0069]
所述bind钩子函数用于对输入的按钮进行属性绑定；
[0070]
所述insert钩子函数用于在插入输入的按钮时，根据输入的插入条件，对按钮进行显示或禁用；
[0071]
所述update钩子函数用于在更新输入的按钮时，根据输入的更新条件，对按钮进行显示或禁用。
[0072]
具体地，本发明实施例中钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，这三个钩子函数分别执行不同的功能，bind钩子函数是指绑定指令到输入的按钮上，只会执行一次；insert钩子函数是指绑定了指令的元素插入到页面中展示时调用；update钩子函数是指在输入的按钮进行更新时调用该函数。
[0073]
在上述实施例的基础上，优选地，所述前端登录信息包括用户登录信息、用户业务信息和用户场景信息。
[0074]
本发明实施例中前端登录信息包括用户登录信息、用户业务信息和用户场景信息三部分，可以根据用户登录信息、用户业务信息和用户场景信息三部分，用户登录信息是指用户注册登录时的信息，用户业务信息是指用户所处的业务组信息，常见的用户业务信息可以包括所在业务组、所在业务组中所处模块，是开发模块还是测试模块等，用户场景信息是指该用户所处的业务应用场景。在根据前端登录信息确定按钮权限，是根据用户登录信息、用户业务信息和用户场景信息三方面来确定按钮权限，可以是优先根据用户业务信息来确定一个大范围的用户权限，然后再根据用户登录信息和用户场景信息两方面对前面限定的大范围用户权限进行细化，来最终确定前端登录信息对应的用户权限；也可以是对用户登录信息、用户业务信息和用户场景信息三方面并列进行按钮权限的限定，具体可以根据实际情况来进行确定，本发明实施例在此不做具体限定。
[0075]
在上述实施例的基础上，优选地，所述根据前端登录信息，获取前端页面对应的前端页面端口，包括：
[0076]
根据用户登录账号和登录密码，获取token秘钥；
[0077]
根据所述token秘钥，获取所述用户业务信息和所述用户场景信息；
[0078]
根据所述用户登录信息、所述用户业务信息和所述用户场景信息，结合预设端口匹配规则，获取所述前端页面端口。
[0079]
在项目开发过程中权限验证与安全性是非常重要的，可以说是一个项目一开始就必须考虑和搭建的基础核心功能。当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token秘钥，拿到token秘钥之后，将这个token秘钥存贮到cookie中，保证刷新页面后能记住用户登录状，前端会根据token秘钥再去拉取一个user_info的接口，来获取用户业务信息和所述用户场景信息，然后再根据用户登录信息、用户业务信息和用户场景信息，结合预设端口匹规则，得到前端页面端口
[0080]
在上述实施例的基础上，优选地，所述根据所述前端页面对应的按钮权限，获取所有可调用按钮，包括：
[0081]
通过vuex定义按钮调用权限状态对象，并创建按钮指令，并为每个按钮绑定一个按钮指令；
[0082]
在按钮调用权限文件中，获取每一按钮对应的指令值，从按钮调用权限状态对象中得到每一按钮是否有权限，若有，则将每一按钮作为所述可调用按钮。
[0083]
本发明实施例中根据前端页面对应的按钮权限，得到可调用按钮，具体步骤为通过vuex定义按钮调用权限状态对象，并且创建按钮指令，并为每个按钮绑定一个按钮指令；然后在按钮调用权限文件中，得到该调用按钮的指令值，从按钮调用权限状态对象中得到该按钮是不是有权限，如果有，则将该按钮作为可调用按钮。
[0084]
综上，本发明实施例提供一种基于vue的按钮权限控制方法，通过自定义权限控制
指令，将所有按钮权限控制的相关逻辑都维护到了同一个公共文件中，方便进行权限的管理，业务需求变更也更易于修改，并且通过只传入条件变量，自定义实现控制权限函数的方式，也保证了代码的灵活度，可用于支持各种场景，代码的可读性和可维护性都能够的到大大的提高，并且随着项目的扩大，受益会更明显。对权限按钮通过自定义指令的方式优化以后，不仅提高了代码的可读性和可维护性，也降低了需求变更的难度，权限控制相关逻辑维护到公共文件中，不仅易于开发人员寻找相关代码，并且通过when函数来实现条件判断也简单明了，只需传入条件变量易于开发人员在不同文件中使用，大大提高了项目的开发效率。
[0085]
图3为本发明实施例提供的一种基于vue的按钮权限控制系统的结构示意图，如图3所示，该系统包括端口模块310、权限模块320、名称模块330和显示模块340，其中：
[0086]
端口模块310用于根据前端登录信息，获取前端页面对应的前端页面端口；
[0087]
权限模块320用于根据前端页面端口和预设端口权限对应表，获取所述前端页面对应的按钮权限；
[0088]
名称模块330用于根据所述前端页面对应的按钮权限，获取所有可调用按钮，并根据每一可调用按钮和按钮名称对应表，获取每一可调用按钮的预设名称；
[0089]
显示模块340用于根据每一可调用按钮的预设名称和每一可调用按钮的当前显示条件，调用公共文件库中的相应函数，对在所述前端页面上对每一可调用按钮进行显示或禁用，所述公共文件库包括按钮的所有功能函数，所述功能函数用于根据所述当前显示条件判断输入按钮是否显示。
[0090]
本实施例为与上述方法实施例相对应的系统实施例，其具体实施过程与上述方法实施例相同，详情请参考上述方法实施例，本系统实施例在此不再赘述。
[0091]
在上述实施例的基础上，优选地，所述公共文件库包括按钮创建函数、按钮处理函数和钩子函数，其中：
[0092]
所述按钮创建函数用于根据输入的按钮名称，创建相应按钮；
[0093]
所述按钮处理函数用于根据输入的按钮名称和预设显示条件，对按钮进行显示或禁用；
[0094]
所述钩子函数用于根据输入的按钮名称和函数控制条件变化时，对按钮进行显示或禁用。
[0095]
在上述实施例的基础上，优选地，所述钩子函数包括bind钩子函数、insert钩子函数和update钩子函数，其中：
[0096]
所述bind钩子函数用于对输入的按钮进行属性绑定；
[0097]
所述insert钩子函数用于在插入输入的按钮时，根据输入的插入条件，对按钮进行显示或禁用；
[0098]
所述update钩子函数用于在更新输入的按钮时，根据输入的更新条件，对按钮进行显示或禁用。
[0099]
在上述实施例的基础上，优选地，所述前端登录信息包括用户登录信息、用户业务信息和用户场景信息。
[0100]
在上述实施例的基础上，优选地，所述断开模块包括秘钥单元、信息单元和匹配单元，其中：
[0101]
所述秘钥单元用于根据用户登录账号和登录密码，获取token秘钥；
[0102]
所述信息单元用于根据所述token秘钥，获取所述用户业务信息和所述用户场景信息；
[0103]
所述匹配单元用于根据所述用户登录信息、所述用户业务信息和所述用户场景信息，结合预设端口匹配规则，获取所述前端页面端口。
[0104]
在上述实施例的基础上，优选地，所述名称模块包括指令单元和判断单元，其中：
[0105]
所述指令单元用于通过vuex定义按钮调用权限状态对象，并创建按钮指令，并为每个按钮绑定一个按钮指令；
[0106]
所述判断单元用于在按钮调用权限文件中，获取每一按钮对应的指令值，从按钮调用权限状态对象中得到每一按钮是否有权限，若有，则将每一按钮作为所述可调用按钮。
[0107]
在上述实施例的基础上，优选地，所述公共文件库包括按钮显示结构体，所述按钮显示结构体包括按钮名称和显示条件。
[0108]
上述基于vue的按钮权限控制系统中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
[0109]
图4为本发明实施例中提供的一种计算机设备的结构示意图，该计算机设备可以是服务器，其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括计算机存储介质、内存储器。该计算机存储介质存储有操作系统、计算机程序和数据库。该内存储器为计算机存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储执行基于vue的按钮权限控制方法过程中生成或获取的数据，如前端登录信息、前端页面端口。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种基于vue的按钮权限控制方法。
[0110]
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中的基于vue的按钮权限控制方法的步骤。或者，处理器执行计算机程序时实现基于vue的按钮权限控制系统这一实施例中的各模块/单元的功能。
[0111]
在一实施例中，提供一计算机存储介质，该计算机存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中基于vue的按钮权限控制方法的步骤。或者，该计算机程序被处理器执行时实现上述基于vue的按钮权限控制系统这一实施例中的各模块/单元的功能。
[0112]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，
诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。
[0113]
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
[0114]
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。