基于vue的前端权限控制方法、系统、装置及介质制造方法及图纸

一种基于vue的前端权限控制方法，包括：获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息；基于所述权限控制管理应用对所述用户登录信息进行验证；响应于验证通过，基于所述权限控制管理应用向所述主应用返回用户登录结果；响应于所述主应用获取到所述用户登录结果，根据用户权限列表动态生成前端路由列表，并确定所述访问者可访问的第一路由列表；基于所述第一路由列表，控制页面可视化资源的显示或隐藏。视化资源的显示或隐藏。视化资源的显示或隐藏。

【技术实现步骤摘要】
基于vue的前端权限控制方法、系统、装置及介质


[0001]本专利技术涉及前端权限控制领域，具体涉及一种基于vue的前端权限控制方法、系统、装置及介质。

技术介绍

[0002]随着时代的发展，前端技术及框架的不断更新，页面功能及交互的复杂度也随着增加，一些页面除了需要有固定的展示内容，经常还需要带有权限管理的功能，以满足不同角色用户需求。再加上各企业项目平台系统日益增多，每个平台系统都需要对该系统资源进行管理，如各类菜单和按钮等权限控制。常规的权限设计方案是在后端将用户与权限直接绑定，为不同用户赋予不同的权限，这样每套系统都需要开发设置用户权限，重复工作量大，设计不够灵活，不利于统一管理。
[0003]因此，需要提供一种可以统一集中控制各个应用的权限，减少应用的权限开发的基于vue的前端权限控制方法、系统及介质。

技术实现思路

[0004]本专利技术的目的在于提供一种基于vue的前端权限控制方法、系统及装置。以期实现快捷、准确的监测检验数据造假的可能性。
[0005]为了实现前述目的，本专利技术采用以下技术方案：
[0006]一种基于vue的前端权限控制方法，包括：
[0007]获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息；
[0008]基于所述权限控制管理应用对所述用户登录信息进行验证；
[0009]响应于验证通过，基于所述权限控制管理应用向所述主应用返回用户登录结果；
[0010]响应于所述主应用获取到所述用户登录结果，根据用户权限列表动态生成前端路由列表，并确定所述访问者可访问的第一路由列表；
[0011]基于所述第一路由列表，控制页面可视化资源的显示或隐藏。
[0012]在一些实施例中，所述用户登录信息包括主应用标识。
[0013]在一些实施例中，所述主应用标识基于所述权限控制管理应用为所述主应用分配，所述主应用标识包括appkey和token。
[0014]在一些实施例中，所述基于所述权限控制管理应用对所述用户登录信息进行验证包括：
[0015]基于所述权限控制管理应用，根据所述appkey和所述token判断登录状态、用户权限以及发送所述用户登录信息的所述主应用。
[0016]同时，本专利技术还公开了一种基于vue的前端权限控制系统，包括：
[0017]获取模块，用于获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息；
[0018]验证模块，用于基于所述权限控制管理应用对所述用户登录信息进行验证；
[0019]返回模块，用于响应于验证通过，基于所述权限控制管理应用向所述主应用返回用户登录结果；
[0020]确定模块，用于响应于所述主应用获取到所述用户登录结果，根据用户权限列表动态生成前端路由列表，并确定所述访问者可访问的第一路由列表；
[0021]控制模块，用于基于所述第一路由列表，控制页面可视化资源的显示或隐藏。
[0022]在一些实施例中，所述权限控制管理应用用于为向所述主应用提供用户权限数据，以及为接入的所述主应用提供用户权限列表；
[0023]所述主应用用于基于所述用户权限列表控制前端框架组件的页面展示。
[0024]在一些实施例中，所述前端框架组件基于vue.js生成，包括路由、控制器、指令、内置http模块以及整体模块。
[0025]在一些实施例中，所述第一路由列表包括用户登录页、错误信息页和应用主页三个页面的路由配置。
[0026]同时，本专利技术还公开了一种基于vue的前端权限控制装置，所述装置包括至少一个处理器以及至少一个存储器；所述至少一个存储器用于存储计算机指令；所述至少一个处理器用于执行所述计算机指令中的至少部分指令以实现前述的基于vue的前端权限控制方法。
[0027]同时，本专利技术还公开了一种计算机可读存储介质，所述存储介质存储计算机指令，当计算机读取所述计算机指令时，所述计算机执行前述的所述的基于vue的前端权限控制方法。
[0028]有益效果
[0029]本专利技术与现有技术相比，其显著优点是：
[0030]通过本方法可以有效使权限控制管理功能与主应分离，实现应用权限统一由通用权限管理应用进行管理，管理员可以可视化在通用权限应用中对用户权限进行操作，统一集中控制各个应用的权限，减少应用的权限开发，对于应用后期的开发维护和扩展支持都很好。
附图说明
[0031]图1是本实施例涉及一种基于vue的前端权限控制系统的示意图；
[0032]图2是本实施例涉及的一种基于vue的前端权限控制方法的流程示意图；
[0033]图3是本实施例涉及的基于vue的前端权限控制系统的应用场景示意。
具体实施方式
[0034]为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0035]相反，本申请涵盖任何由权利要求定义的在本申请的精髓和范围上做的替代、修改、等效方法以及方案。进一步，为了使公众对本申请有更好的了解，在下文对本申请的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本申请。
[0036]以下将结合图1
‑
3对本申请实施例所涉及的一种基于vue的前端权限控制方法及系统进行详细说明。值得注意的是，以下实施例仅仅用于解释本申请，并不构成对本申请的限定。
[0037]实施例1
[0038]如图1所示为基于vue的前端权限控制系统100的示意图，一种基于vue的前端权限控制系统100，包括：
[0039]获取模块110，用于获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息。
[0040]在一些实施例中，所述权限控制管理应用用于为向所述主应用提供用户权限数据，以及为接入的所述主应用提供用户权限列表。例如，所述权限控制管理应用为独立的应用，主要功能为管理用户、角色、权限、角色资源，为接入的各个应用提供用户权限列表。
[0041]所述主应用用于基于所述用户权限列表控制前端框架组件的页面展示。
[0042]验证模块120，用于基于所述权限控制管理应用对所述用户登录信息进行验证。
[0043]返回模块130，用于响应于验证通过，基于所述权限控制管理应用向所述主应用返回用户登录结果。
[0044]确定模块140，用于响应于所述主应用获取到所述用户登录结果，根据用户权限列表动态生成前端路由列表，并确定所述访问者可访问的第一路由列表。
[0045]控制模块150，用于基于所述第一路由列表，控制页面可视化资源的显示或隐藏。
[0046]在一些实施例中，所述前端框架组件基于vue.js生成，包括路由、控制器、指令、内置http模块以及整体模块。vue.js是被设计为自本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于vue的前端权限控制方法，其特征在于，包括：获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息；基于所述权限控制管理应用对所述用户登录信息进行验证；响应于验证通过，基于所述权限控制管理应用向所述主应用返回用户登录结果；响应于所述主应用获取到所述用户登录结果，根据用户权限列表动态生成前端路由列表，并确定所述访问者可访问的第一路由列表；基于所述第一路由列表，控制页面可视化资源的显示或隐藏。2.根据权利要求1所述的方法，其特征在于，所述用户登录信息包括主应用标识。3.根据权利要求2所述的方法，其特征在于，所述主应用标识基于所述权限控制管理应用为所述主应用分配，所述主应用标识包括appkey和token。4.根据权利要求3所述的方法，其特征在于，所述基于所述权限控制管理应用对所述用户登录信息进行验证包括：基于所述权限控制管理应用，根据所述appkey和所述token判断登录状态、用户权限以及发送所述用户登录信息的所述主应用。5.一种基于vue的前端权限控制系统，其特征在于，包括：获取模块，用于获取访问者通过主应用登录功能向权限控制管理应用发送的用户登录信息；验证模块，用于基于所述权限控制管理应用对所述用户登录信息进行验证；返回模块，用于响应于验证通过，基于所述...

【专利技术属性】
技术研发人员：张宇，李伟，
申请(专利权)人：四川启睿克科技有限公司，
类型：发明
国别省市：