浏览器页面展示方法、装置、电子设备及可读介质与流程

本申请涉及互联网领域，尤其涉及一种浏览器页面展示方法、装置、电子设备及计算机可读介质。

背景技术：

目前权限控制越来越趋向于更细粒度校验，主要方式多是通过基于角色的权限访问控制(role-basedaccesscontrol，rbac)方式进行设计与控制。在rbac中，权限与角色相关联，用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。但在现有技术中，页面初始加载、校验过程通常分为以下三种方式：

第一种是依靠开源的模板引擎，例如vm引擎、freemarker引擎等，而主要的权限控制位于后端。这种方式中，前后端紧密结合，渲染出整个页面再发送到浏览器。前端刷新时，每次都将重新加载后端数据以显示页面。此种方式依赖引擎较大。

其次，另一种方式是使用mvvm(model-view-viewmodel)模式在前端用数据绑定的方式加载页面、控制菜单、按钮等。在js中需要先声明菜单和按钮的名称，然后页面加载的时候初始这些名称数据，判断是后为true，然后显示与否。

第三种方式是主要用于后端的检验，前端初始功能后，在页面操作的时候由后端进行url校验，这种方式强依赖于后端。权限主要通过应用程序编程接口(applicationprogramminginterface，api)返回给前端，前端再根据权限控制页面的元素。其中，api是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

上述三种方式均要求前后端合作控制权限。在实际操作过程中，现有技术存在如下不足之处：

(1)前后端间过于紧密，耦合度也较强；在系统开发过程中，前后端职责容易划分不清，且权限数据之间交互难度大；http的请求处理，当发送的数据请求，返回的结果如果是错误返回码还需要后端判断，前后端交错复杂，对错误请求处理过于依赖后端，权限使用灵活性差。当使用模板引擎时，需要后端去加载页面和数据，前端灵活性降低。同时，由于后端的框架对普通的mvc模式耦合度限制过强，后端性能优化时还要考虑前端部分，带来了“鸡肋”问题。前后端调整都是憋手蹩脚，无法彻底发挥前后端各自优势。

(2)当api进行权限校验时，每个api入口出都需要检查一遍，并且仅到权限级别，无法进行粒度更小的控制。权限虽然可通过用户、角色实现配置，但是权限与页面元素、api的是否允许调用的检验需要额外代码来完成，造成代码冗余。在系统维护过程中，后端需要维护前端数据，包括菜单、按钮和视图的绑定，造成后端资源浪费，并加大了后端程序压力。

(3)当前端页面刷新频繁时，将产生过多的无用请求。由于每次页面跳转均需从后台重新请求数据，将造成后端服务资源浪费，占用网络资源。当用户过多，权限资源过多情况下，将极大地影响后端性能。且开发难度大，用单个应用后台去控制整个前端页面，或者只靠js完成效果，都会加大开发成本和难度。

技术实现要素：

有鉴于此，本申请提供一种浏览器页面展示方法、装置、电子设备及计算机可读介质，能够在保证权限安全性的基础上，提高权限控制的灵活性与响应速度，并节约前后端资源。

本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。

根据本申请实施例的第一方面，提出一种浏览器页面展示方法，该方法包括：接收来自用户的页面加载请求；通过浏览器获取用户的资源权限信息；根据页面加载请求中的页面地址与所述资源权限信息确定加载资源；由后台服务器获取所述加载资源；以及对所述加载资源进行渲染以生成展示页面。

在本申请的一种示例性实施例中，还包括：网页页面首次加载时，生成所述用户的资源权限信息；以及将所述资源权限信息作为全局变量储存在浏览器的全局变量储存器中。

在本申请的一种示例性实施例中，还包括：声明空的全局变量名以作为所述全局变量储存器。

在本申请的一种示例性实施例中，还包括：实时监控所述资源权限信息；在所述资源权限信息变更时，广播变更后的资源权限信息。

在本申请的一种示例性实施例中，还包括：实时监控页面加载请求中的页面地址；在所述页面地址不满足资源权限信息中的配置时，拒绝所述页面加载请求。

在本申请的一种示例性实施例中，实时监控页面加载请求中的页面地址包括：通过路由变化事件函数实时监控页面加载请求中的页面地址。

在本申请的一种示例性实施例中，根据页面加载请求中的页面地址与所述资源权限信息确定加载资源包括：根据所述页面地址与所述资源权限信息确定网页的资源访问权限；以及根据网页的资源访问权限确定加所述载资源，所述加载资源包括网页动作信息与网页行为信息。

在本申请的一种示例性实施例中，对所述加载资源进行渲染以生成展示页面包括：通过浏览器对所述加载资源进行渲染，生成多个页面片段；以及将所述页面片段进行拼接以生成展示页面。

在本申请的一种示例性实施例中，对所述加载资源进行渲染以生成展示页面还包括：获取所述展示页面的页面权限；在所述页面权限与所述资源权限校验一致时，生成所述展示页面。

根据本申请实施例的第二方面，提出一种浏览器页面展示装置，该装置包括：接收模块，用于接收来自用户的页面加载请求；资源权限模块，用于通过浏览器获取用户的资源权限信息；资源确定模块，用于根据页面加载请求中的页面地址与所述资源权限信息确定加载资源；加载模块，用于由后台服务器获取所述加载资源；以及渲染模块，用于对所述加载资源进行渲染以生成展示页面。

根据本申请实施例的第三方面，提出一种电子设备，该电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一项所述的浏览器页面展示方法。

根据本申请实施例的第四方面，提出一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如上述任一项所述的浏览器页面展示方法。

根据本申请的浏览器页面展示方法、装置、电子设备及计算机可读介质，能够在保证权限安全性的基础上，提高权限控制的灵活性与响应速度，并节约前后端资源。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。下面描述的附图仅仅是本申请的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据一示例性实施例示出的一种浏览器页面展示方法及装置的系统框图。

图2是根据一示例性实施例示出的一种浏览器页面展示方法的流程图。

图3是根据一示例性实施例示出的一种浏览器页面展示方法的架构图。

图4是根据一示例性实施例示出的一种浏览器页面展示装置的框图。

图5是根据一示例性实施例示出的一种用于浏览器页面展示的电子设备的框图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本发明将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本发明的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而省略特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

附图仅为本发明的示意性图解，图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和步骤，也不是必须按所描述的顺序执行。例如，有的步骤还可以分解，而有的步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

下面结合附图对本发明示例实施方式进行详细说明。

图1是根据一示例性实施例示出的一种浏览器页面展示方法及装置的系统框图。

服务器105可以是提供各种服务的服务器，例如对用户利用终端设备101、102、103所进行操作的浏览器页面展示系统提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的浏览器页面加载请求等数据进行分析等处理，并将处理结果(例如加载资源、目标图片缩放比例--仅为示例)反馈给终端设备。

服务器105可例如接收来自用户的页面加载请求；服务器105可例如通过浏览器获取用户的资源权限信息；服务器105可例如根据页面加载请求中的页面地址与所述资源权限信息确定加载资源；服务器105可例如由后台服务器获取所述加载资源；服务器105可例如对所述加载资源进行渲染以生成展示页面。

服务器105可以是一个实体的服务器，还可例如为多个服务器组成，服务器105中的一部分可例如作为本申请中的页面加载请求提交系统，用于提交将要执行浏览器页面展示的任务；以及服务器105中的一部分还可例如作为本申请中的浏览器页面展示系统，用于通过浏览器获取用户的资源权限信息；根据页面加载请求中的页面地址与所述资源权限信息确定加载资源；由后台服务器获取所述加载资源；以及对所述加载资源进行渲染以生成展示页面。

需要说明的是，本申请实施例所提供的浏览器页面展示方法可以由服务器105执行，相应地，浏览器页面展示的装置可以设置于服务器105中。而提供给用户用于提交页面加载请求与获取加载资源的请求端一般位于终端设备101、102、103中。

图2是根据一示例性实施例示出的一种浏览器页面展示方法的流程图。根据图2示出的浏览器页面展示方法，可以在保证权限安全性的基础上，提高权限控制的灵活性与响应速度，并节约前后端资源。下面，将参照图2，对本申请示例性实施例中的浏览器页面展示方法进行说明。

在步骤s210中，接收来自用户的页面加载请求。其中，页面加载请求中包括页面地址、当前用户信息等。

根据示例实施例，可在网页页面首次加载时，生成所述用户的资源权限信息；以及将所述资源权限信息作为全局变量储存在浏览器的全局变量储存器中。其中，资源权限信息可例如为权限映射关系。例如，初次不使用angularjs自动加载，而是根据需求去控制angularjs启动，以获得所述用户的资源权限关系。其中，angularjs是一个用于设计动态web应用的结构框架，它是通过指令扩展了超文本标记语言(html)，通过表达式绑定数据到html中。在angularjs中设置了很多的指令，我们可以通过这些指令就能很轻松的完成复杂的任务。

根据示例实施例，可首先声明空的全局变量名以作为所述全局变量储存器。当获得用户的资源权限关系后，再启动angularjs的应用程序，并声明空的全局变量名，以此作为全局变量存储器，用于存储资源权限信息。在当前生命周期内，资源权限信息将一直存储于全局变量存储器中。

在步骤s220中，通过浏览器获取用户的资源权限信息。例如，可以将资源权限信息放入一个service中，该全局变量可以作为系统中所有用户权限的“存储库”，只要当前生命周期没有结束，用户的权限一直储存于浏览器内存中，而且只需加载一次就可完成。其中，service是常用组件之中的一个，它执行在ui线程中，可理解为一个函数仓库，期内定义有相应的函数操作。

根据示例实施例，可实时监控所述资源权限信息；在所述资源权限信息变更时，广播变更后的资源权限信息。例如，可配置一个专用模块，用于实时监控资源权限信息，当权限发生变化的时候广播出去，其他模块接收后对资源权限信息进行更新。

在步骤s230中，根据页面加载请求中的页面地址与所述资源权限信息确定加载资源。

根据示例实施例，可实时监控页面加载请求中的页面地址；在所述页面地址不满足资源权限信息中的配置时，拒绝所述页面加载请求。例如，可配置一个专用模块，用于监听页面地址(例如统一资源定位符url)的变化，并校验当前要跳转的url是否符合条件。

根据示例实施例，实时监控页面加载请求中的页面地址可包括：通过路由变化事件函数实时监控页面加载请求中的页面地址。又例如，可通过路由监视器监视url，并用于匹配全局变量储存器中的资源权限信息，最终根据匹配结果判断是跳转成功或是跳转失败。

根据示例实施例，可根据所述页面地址与所述资源权限信息确定网页的资源访问权限；以及根据网页的资源访问权限确定加所述载资源，所述加载资源包括网页动作信息与网页行为信息。

在步骤s240中，由后台服务器获取所述加载资源。例如，每次请求中路由只加载本模块的所需资源，很大程度上减小前端的请求量。本模块的所需资源只需要配置就可以，使用便捷。并且在路由配置的时候相应地配置所需的访问权限，当前端路由发生变化时候，会自动去映射权限匹配。

在步骤s250中，对所述加载资源进行渲染以生成展示页面。其中，可构建渲染树，对加载资源中的各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染。

根据示例实施例，可通过浏览器对所述加载资源进行渲染，生成多个页面片段；以及将所述页面片段进行拼接以生成展示页面。

根据示例实施例，还可获取所述展示页面的页面权限；在所述页面权限与所述资源权限校验一致时，生成所述展示页面。例如，可以通过自定义指令的方式完成一个页面通用属性，以此真正控制前端页面内容的展示与否。可以从之前已经定义完成的“权限容器“中去匹配自定义指令中的权限，然后在指令中设定相应具体的行为和动作，但本发明并不以此为限。

根据本申请的浏览器页面展示方法，通过使用全局变量储存器存储资源权限信息，并实时监资源权限信息，通过广播形式通知权限变更；同时通过自定义指令方式对权限进行校验。本申请的浏览器页面展示方法能够在保证权限安全性的基础上，提高权限控制的灵活性与响应速度，并节约前后端资源。

图3是根据一示例性实施例示出的一种浏览器页面展示方法的架构图。参照图3，浏览器页面展示方法可划分为如下步骤：

(1)初次加载时，根据需求控制angularjs启动，以获得当前登陆用户的所有的权限映射关系，再启动angularjs的应用程序。并去声明一个空的全局变量名，以此作为权限映射关系的容器。

(2)将获得的权限映射关系放入一个service中，以此作为系统的全局变量，也是系统所有用户权限的“存储库”，相当于在浏览器中放置了权限内存，而且外部不可能随意改动它。当我们按照所需初次加载angularjs完成后，就会把所有的权限映射关系放入之前声明的容器中。只要当前生命周期没有结束，用户的权限映射关系将一直储存于浏览器内存中，而且只需加载一次即可完成，其他模块可直接调用该全局变量以获取相应权限映射关系做匹配判断。

(3)通过路由(router)配置按需加载的方式，每次路由的变化都只是加载本模块的所需资源，可极大地减小前端的请求量。本模块的所需资源只需要配置就可以，使用便捷。并且在路由配置的同时相应的配置所需的访问权限，当前端路由发生变化时候，将会自动映射权限匹配。其中，路由是内部框架的路由器，其可匹配不同的url路径，并进行解析，然后动态的渲染出区域html内容

(4)通过配置一个专用模块，主要用于监视路由的变化，以及当权限发生变化时将该变化广播出去，例如$broadcast方式，以便其他模块接收到该广播后做出相应的权限变化，再去控制页面资源是否有权访问。该专用模块还用于监控路由变化。例如，通过routechangestart事件监听url变化，以校验当前要跳转的url是否符合条件，url都会被路由监视器所监视，并且用于匹配全局变量中的权限，最后决定该跳转为成功或失败。

(5)通过自定义指令的方式实现一个页面通用属性，以此真正控制前端页面内容的展示与否，该方式最大的好处就是从之前都已经定义完成“权限容器”中去匹配自定义指令中的权限，然后在指令中设定相应具体的行为和动作。节省了很多前端代码量，而且在页面任何地方都可以调用，简化了前端逻辑。

(6)在页面请求层配置http的请求处理，例如，可基于restful风格设计控制所有页面http的请求协议，并指定返回请求码，以便前端做相应的业务需求处理。此种方式可简化手动校验http请求方式，只需要用全局http拦截。

根据本申请的浏览器页面展示方法，通过使用全局变量储存器存储资源权限信息，并实时监资源权限信息，通过广播形式通知权限变更；同时通过自定义指令方式对权限进行校验。能够大大减小前端冗余请求、节约前后端服务资源，同时将前后端分离，使前后端更加灵活，使路由处理更加细粒度。综上，本申请的浏览器页面展示方法能够实现资源权限信息全局变量的应用，并实时通过广播形式通知权限的变更，以便其他模块接收到后作出相应的处理；同时，应用自定义指针方式和按需加载方式将加载页面传回的权限与全局变量容器中的资源权限信息进行校验，操作文档对象类型dom元素完成请求。其中，dom处理可扩展标志语言的标准编程接口，dom定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

图4是根据一示例性实施例示出的一种浏览器页面展示装置的框图。参照图4，浏览器页面展示装置可以包括：接收模块410、资源权限模块420、资源确定模块430、加载模块440以及渲染模块450。

在浏览器页面展示装置中，接收模块410用于接收来自用户的页面加载请求。其中，页面加载请求中包括页面地址、当前用户信息等。根据示例实施例，接收模块410还可用于在网页页面首次加载时，生成所述用户的资源权限信息；以及将所述资源权限信息作为全局变量储存在浏览器的全局变量储存器中。

资源权限模块420用于通过浏览器获取用户的资源权限信息。例如，可以将资源权限信息放入一个service中，该全局变量可以作为系统中所有用户权限的“存储库”，只要当前生命周期没有结束，用户的权限一直储存于浏览器内存中，而且只需加载一次就可完成。

资源确定模块430用于根据页面加载请求中的页面地址与所述资源权限信息确定加载资源。根据示例实施例，可实时监控页面加载请求中的页面地址；在所述页面地址不满足资源权限信息中的配置时，拒绝所述页面加载请求。

加载模块440用于由后台服务器获取所述加载资源。例如，每次请求中路由只加载本模块的所需资源，很大程度上减小前端的请求量。本模块的所需资源只需要配置就可以，使用便捷。并且在路由配置的时候相应地配置所需的访问权限，当前端路由发生变化时候，会自动去映射权限匹配。

渲染模块450用于对所述加载资源进行渲染以生成展示页面。其中，可构建渲染树，对加载资源中的各个元素进行位置计算、样式计算等等，然后根据渲染树对页面进行渲染。

根据本申请的浏览器页面展示装置，通过使用全局变量储存器存储资源权限信息，并实时监资源权限信息，通过广播形式通知权限变更；同时通过自定义指令方式对权限进行校验。本申请的浏览器页面展示装置能够在保证权限安全性的基础上，提高权限控制的灵活性与响应速度，并节约前后端资源。

图5是根据一示例性实施例示出的一种用于浏览器页面展示的电子设备的框图。

下面参照图5来描述根据本申请的这种实施方式的电子设备500。图5显示的电子设备500仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(cpu)501，其可以根据存储在只读存储器(rom)502中的程序或者从储存部分508加载到随机访问存储器(ram)503中的程序而执行各种适当的动作和处理。例如，中央处理单元501可以执行如图2、图3中的一个或多个所示的步骤。

在ram503中，还存储有系统操作所需的各种程序和数据，例如资源权限信息、页面地址等。cpu501、rom502以及ram503通过总线504彼此相连。输入/输出(i/o)接口505也连接至总线504。

以下部件连接至i/o接口505：包括触摸屏、键盘等的输入部分506；包括诸如液晶显示器(lcd)等以及扬声器等的输出部分507；包括闪存等的储存部分508；以及包括诸如无线网卡、高速网卡等的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至i/o接口505。可拆卸介质511，诸如半导体存储器、磁盘等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入储存部分508。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，本发明实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u盘，移动硬盘等)中，包括若干指令用以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者智能设备等)执行根据本发明实施例的方法，例如图2、图3中的一个或多个所示的步骤。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其他实施例。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由权利要求指出。

应当理解的是，本发明并不限于这里已经示出的详细结构、附图方式或实现方法，相反，本发明意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。