一种前端实现管理系统权限控制方法

摘要

本发明提供一种前端实现管理系统权限控制方法，属于管理系统用户权限开发领域，本发明在项目中前端借助于项目所用框架及各种依赖库，通过设置白名单，配置路由、导航菜单，控制页面视图的显示和隐藏实现，拦截http接口请求实现对管理系统功能权限、数据权限控制及接口权限的控制，最终达到不同角色的的用户，登录之后看到不一样的效果。

说明书

技术领域

本发明涉及管理系统用户权限开发领域，尤其涉及一种前端实现管理系统权限控制方法。

背景技术

一套网站管理系统，在所有的功能实现之前都必须有一个前提：安全稳定。例如：一个网上商城的系统，网店的稳定性、资金安全、产品信息、订单数据，所有的内容都依托于安全稳定的系统。

前端权限控制并不是新生事物，早在后端MVC时代，web系统中就已经普遍存在对按钮和菜单的显示/隐藏控制，只不过当时它们是由后端程序员在jsp或者php模板中实现的。

随着前后端分离架构的流行，前后端以接口为界实现开发解耦，权限控制也一分为二，前端权限控制的所有权才真正回到了前端。在前后端分离的模式下，所有的交互场景都变成了数据交互，因此传统业务系统中的权限控制方案在前端已经不再适用(比如使用后台模板标签进行权限控制)，需要另外设计权限控制方案。

另外，近几年兴起的前端三大主流框架Angular，React和Vue也为前端实现管理系统权限控制提供了可能。

发明内容

为了解决以上技术问题，本发明提供了一种前端实现管理系统权限控制方法。

本发明的技术方案是：

一种前端实现管理系统权限控制方法，在项目中前端借助于项目所用框架及各种依赖库，通过设置白名单，配置路由、导航菜单，控制页面视图的显示和隐藏实现，拦截http接口请求实现对管理系统功能权限、数据权限控制及接口权限的控制，最终达到不同角色的的用户，登录之后看到不一样的效果。

包括如下步骤：

1)设置系统路由白名单，所有用户都可以访问的页面；

2)路由处理，当用户访问一个它没有权限访问的url时,跳转到一个错误提示页面，不允许用户通过URL访问没有权限访问的界面；

3)菜单处理，系统根对不同的用户生成不一样的导航菜单；

4)视图处理，根据用户拥有的权限,判断页面上的一些内容是否显示；

5)HTTP请求处理，当发送一个数据请求,如果返回的status是401或者404,则重定向到一个错误提示的页面；

用户在登录页面，填写完用户名和密码后，前端调登录接口，服务器会返回一个带有用户身份信息的token令牌，然后前端拿这个令牌去请求该用户具有的四种权限列表，分别是路由权限、菜单权限、接口权限和视图权限；随即将这些权限存储在本地，以访用户刷新页面时，不需要二次请求权限信息。

进一步的，

所述步骤1)设置系统路由白名单，事先梳理出系统里不需要权限控制的页面，列入公用页面，这些页面任何人都可以访问，将其事先配入白名单。

所述步骤2)处理路由权限，将登陆后从后端请求拿到的路由权限表和系统里开发时写好的全部的路由表作比较，生成最终用户可访问的路由表，然后异步添加到用户可访问的路由，和操作步骤1)提及的白名单里的路由共同构成了该用户可以访问的系统最终页面集合。

所述步骤3)菜单处理，菜单权限将实现动态菜单，将登陆后从后端请求拿到的菜单权限表，遍历放在页面导航位置。

在操作步骤2)路由权限里已经为用户配置过所有菜单对应的路由。

所述步骤4)处理视图权限，是操作按钮和页面模块的权限，它与路由权限相对应，是一对多的关系，即一个路由权限可对应一个以上视图权限，是前端根据路由权限下的视图资源权限集合，去控制页面视图的显示和隐藏，视图权限开发时要和具体的视图一一对应。

所述操作步骤5)处理接口权限，使用与系统框架匹配的http库实现一个请求拦截器，对将要发起的请求与用户http资源权限进行匹配，拦截越权请求，弹出越权相关的提示信息。

本发明的有益效果是

在互联网高速发展的当下，权限管理是网站管理系统相当重要的组成部分通过本方法在前端处理实现系统权限控制，可以在以下方面取得有益效果：

1)提升用户体验。从用户体验角度出发，一个设计优良的系统理应根据权限为每个用户展现特定的视图，避免在界面上给用户带来困扰。

2)提升突破权限的门槛。前端权限控制是系统安全的排头兵，可以防范掉通过手动输url、控制台发请求、开发者工具改数据这种级别的入侵；

3)为服务器减压。前端通过对http请求进行处理，将越权的请求在客户端就进行拦截，减少了用户对服务器的请求次数，也就减小请求所占带宽，能够节省可观的资源。

附图说明

图1权限控制简图；

图2基于VUE实现权限控制方案流程图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例，基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

管理系统主要是用于对网站前台的信息管理，如文字、图片、影音、和其他日常使用文件的发布、更新、删除等操作。随着互联网技术的发展，对于一个大型的管理系统，用户量一般都较大，为了网站的安全，例如：网站的重要信息只能由职级较高的领导才可以看到；某些数据的删除必须由管理员擦可以操作等等，以及实现对使用者来说方便的操作流程，例如：用户只需要看到自己工作要用的系统页面，那么根据用户身份，赋予其不同的权限也就凸显的格外重要。

本方法是前端利用资源到角色，角色到用户的思想，通过开发系统白名单和对系统路由、导航菜单、视图及Http请求的权限控制，实现对管理系统功能权限、数据权限及接口权限的控制，使不同用户登录之后看到不一样的系统，既对业务进行了隔离，也保证数据安全，达到系统的最终权限管理。

对网站管理系统实现权限控制是基于角色的访问控制来实现的，基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。实际操作时只需要给不同用户配置不同角色即可。

一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用户的权限管理，减少系统的开销。

目前利用三大前端主流框架Angular，React和Vue,搭建出来的项目都是单页面应用，针对这种架构，从整体项目上来讲,大约有3处地方,前端工程师需要进行处理。

1)设置系统路由白名单(所有用户都可以访问的页面)；

2)路由处理(当用户访问一个它没有权限访问的url时,跳转到一个错误提示页面，不允许用户通过URL访问没有权限访问的界面)；

3)菜单处理(系统根对不同的用户生成不一样的导航菜单)；

4)视图处理(根据用户拥有的权限,判断页面上的一些内容是否显示)；

5)HTTP请求处理(当我们发送一个数据请求,如果返回的status是401或者404,则通常重定向到一个错误提示的页面)；

用户在登录页面，填写完用户名和密码后，前端调登录接口，服务器会返回一个带有用户身份信息的token令牌，然后前端拿这个令牌去请求该用户具有的四种权限列表，分别是路由权限、菜单权限、接口权限和视图权限。随即将这些权限存储在本地，以访用户刷新页面时，不需要二次请求权限信息。

所述操作步骤1)设置系统路由白名单，事先梳理出系统里不需要权限控制的页面，列入登陆页面，404及欢迎页面等一些公用页面，这些页面任何人都可以访问，将其事先配入白名单，就不需要在为角色配置资源时，重复配置这些路由资源，也减轻了管理员的工作量。

所述操作步骤2)处理路由权限，将登陆后从后端请求拿到的路由权限表和系统里开发时写好的全部的路由表作比较，生成最终用户可访问的路由表，然后异步添加到用户可访问的路由，和操作步骤1)提及的白名单里的路由共同构成了该用户可以访问的系统最终页面集合。

所述操作步骤3)菜单处理，菜单权限将实现动态菜单，将登陆后从后端请求拿到的菜单权限表，遍历放在页面导航位置。注意：此步骤前提是，在所述操作步骤2)路由权限里已经为用户配置过所有菜单对应的路由。

所述操作步骤4)处理视图权限，一般是一些操作按钮和页面某个模块的权限，它与路由权限相对应，是一对多的关系，即一个路由权限可对应多个视图权限，是前端根据路由权限下的视图资源权限集合，去控制页面视图的显示和隐藏，视图权限比较多，开发时要注意和具体的视图一一对应起来。

所述操作步骤5)处理接口权限，我们这边已经通过在视图权限控制了访问入口不同权限的显隐，也通过路由限制了输入URL访问页面，但http请求控制是作为最后一道防线，前端仍需要做http处理请求处理，因为路由可能配置失误，按钮可能忘了加权限，这种时候http请求控制就起了作用，越权请求将在前端就被拦截。使用与系统框架匹配的http库实现一个请求拦截器，对将要发起的请求与用户http资源权限进行匹配，拦截越权请求，弹出越权相关的提示信息。

1)功能权限，可以灵活实现为拥有不同权限的用户展示不一样的页面，提升了用户体验；

2)数据权限，同一页面不同的用户看到不同数据；

3)接口权限，一种高效过滤越权请求，减轻服务端压力的权限控制。对接口请求的控制，用户请求接口时，会在前端先进行判断该接口是否在用户接口权限列表范围内，若否，则不向服务器发送请求，减少了对服务器的请求次数。

以上所述仅为本发明的较佳实施例，仅用于说明本发明的技术方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等，均包含在本发明的保护范围内。