CN113312049B - 一种前端动态路由实现方法 - Google Patents
一种前端动态路由实现方法 Download PDFInfo
- Publication number
- CN113312049B CN113312049B CN202110654670.5A CN202110654670A CN113312049B CN 113312049 B CN113312049 B CN 113312049B CN 202110654670 A CN202110654670 A CN 202110654670A CN 113312049 B CN113312049 B CN 113312049B
- Authority
- CN
- China
- Prior art keywords
- menu
- data
- user
- different
- role
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/30—Authentication, i.e. establishing the identity or authorisation of security principals
- G06F21/31—User authentication
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Computer Hardware Design (AREA)
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及Java的SpringBoot应用领域，具体提供了一种前端动态路由实现方法，其特征在于，使用后端分离时，后端接口用来获取当前登录用户的菜单权限数据，并对菜单权限数据封装为前端方便处理的数据，前端在调用后端接口时将返回的数据二次处理，处理为满足Vue路由方式的数据，最终实现动态的菜单路由展示。与现有技术相比，本发明使得依赖包版本减少冲突，也可以适当缓解不稳定性的问题。
Description
技术领域
本发明涉及Java的SpringBoot应用领域，具体提供一种前端动态路由实现方法。
背景技术
Spring框架是由于软件开发的复杂性而创建的。Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅仅限于服务器端的开发。从简单性、可测试性和松耦合性角度而言，绝大部分Java应用都可以从Spring。
但是，SpringBoot通过集成大量的框架使得依赖包的版本冲突和不稳定性问题突出。
发明内容
本发明是针对上述现有技术的不足，提供一种实用性强的前端动态路由实现方法。
本发明解决其技术问题所采用的技术方案是：
一种前端动态路由实现方法，使用后端分离时，后端接口用来获取当前登录用户的菜单权限数据，并对菜单权限数据封装为前端方便处理的数据，前端在调用后端接口时将返回的数据二次处理，处理为满足Vue路由方式的数据，最终实现动态的菜单路由展示。
进一步的，后端对用户权限的封装，使用者根据需求创建不同的角色，并给各个角色授权不同的功能权限，并为不同的用户分配不同的角色，不同的角色访问不同的菜单资源。
进一步的，菜单资源分为两类，用于访问的菜单信息和非菜单信息，
所述菜单信息为用户可以直观看到的、可以访问的菜单数据；
所述非菜单信息则是用于具体的页面操作或路由跳转。
作为优选，后端中数据封装方面，用户包括用户ID、用户名称和用户密码，角色包括角色ID和角色名称，菜单包括菜单ID、菜单名称和菜单URL。
进一步的，数据关联方面，一个用户可以绑定多个角色，一个角色可以授予多个用户，角色可以绑定不同的菜单。
进一步的，根据角色信息，根据接口获取到相关的菜单数据后，根据前端所需要的数据格式，拆分为非菜单和菜单两部分，同时为每个菜单组装其子菜单，最后将拆分和重组拼接后的菜单数据返回给前端。
进一步的，不同角色的用户登录系统以后，前端获取到后端的用户权限菜单数据后，首先将数据进行拆分，拆分成必须要显示的静态路由表和可以动态显示的动态路由表；
根据路由表数据系统会生成当前用户可以访问的菜单，实现通过管理员角色对其他用户的管理，管理员前端系统页面的操作对应后端不同的接口来改变用户菜单数据，最终实现不同的用户访问系统时只获取到自己可以访问的菜单内容。
进一步的，对后端数据的处理，根据后端数据中不同的菜单数据字段对非菜单和菜单进行不同的处理，核心处理为利用条件判断拼接vue所适配的路由信息，其中涉及使用递归的方式来处理父级菜单和子级菜单。
进一步的，对于菜单为外部链接iframe的，数据条件判断后使用vue中路由的元数据字段进行单独存储，对当前路的路由元数据获取后调用公共组件页面实现外链的展示。
进一步的，前端只处理菜单数据，不关心角色数据，用户、角色和菜单的关系。
本发明的一种前端动态路由实现方法和现有技术相比，具有以下突出的有益效果：
本发明可以使得依赖包版本减少冲突，也可以适当缓解不稳定性的问题，可以实现根据用户权限动态获取用户可以访问的菜单路由资源，有效的控制了用户访问权限，对不同的用户实现数据资源的获取和保护。采用前后端分离式编程，方便后期的维护和推展，具有较高的扩展性和复用性。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图1是一种前端动态路由实现方法中后端接口对于用户可访问菜单路由的权限控制流程图；
附图2是一种前端动态路由实现方法中前端对后端相应的菜单数据的处理流程图。
具体实施方式
为了使本技术领域的人员更好的理解本发明的方案，下面结合具体的实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例都属于本发明保护的范围。
下面给出一个最佳实施例：
本发明的一种前端动态路由实现方法，使用后端分离的方式时，后端接口用来获取当前登录用户的菜单权限数据，并对菜单权限数据封装为前端方便处理的数据，前端在调用后端接口时将返回的数据二次处理。处理为满足Vue路由方式的数据，最终实现动态的菜单路由展示。技术方案如下：
(一)后端对用户权限的封装
如图1，使用者可以根据需求创建不同的角色，并给各个角色授权不同的功能权限，并为不同的用户分配不同的角色，这样每个用户就会有属于自己的用户角色信息，不同的角色可以访问不同的菜单资源，这里菜单资源分为两类，可以访问的菜单信息和非菜单信息。其中菜单信息为用户可以直观看到的可以访问的菜单数据，非菜单信息则主要为具体的页面操作或者路由跳转等。通过对用户可访问菜单的方式实现对不同用户的权限控制。
数据封装方面，用户包括用户ID、用户名称和用户密码等，角色包括角色ID、角色名称等，菜单包括菜单ID、菜单名称和菜单URL等。
数据关联，一个用户可以绑定多个角色，一个角色可以授予多个用户。角色可以绑定不同的菜单。
数据绑定，根据角色信息，根据接口获取到相关的菜单数据后，根据前端所需要的数据格式，拆分为非菜单和菜单两部分，同时为每个菜单组装其子菜单，最后将拆分和重组拼接后的菜单数据返回给前端。
(二)前端对菜单数据的处理
如图2，不同角色的用户登录系统以后，前端获取到后端的用户权限菜单数据后，首先将数据进行拆分，拆分成必须要显示的静态路由表和可以动态显示的动态路由表。
根据路由表数据系统会生成当前用户可以访问的菜单，由于不同的角色所能访问的菜单不同，就可以赋予管理员最大的权限，实现通过管理员角色对其他用户的管理，管理员前端系统页面的操作对应后端不同的接口来改变用户菜单数据，最终实现不同的用户访问系统时只获取到自己可以访问的菜单内容。
对后端数据的处理，根据后端数据中不同的菜单数据字段对非菜单和菜单进行不同的处理，核心处理为利用条件判断拼接vue所适配的路由信息，包括path、component、children和name等对象属性，其中涉及使用递归的方式来处理父级菜单和子级菜单，即children数据。
对于菜单为外部链接iframe的，数据条件判断后使用vue中路由的元数据字段进行单独存储，对当前路的路由元数据获取后调用公共组件页面实现外链的展示。
前端只处理菜单数据，不关心角色数据，用户、角色和菜单的关系，上述关系全部由后端处理，从而实现前后端分离，便于开发和维护。
上述具体的实施方式仅是本发明具体的个案，本发明的专利保护范围包括但不限于上述具体的实施方式，任何符合本发明的一种前端动态路由实现方法权利要求书的且任何所述技术领域普通技术人员对其做出的适当变化或者替换，皆应落入本发明的专利保护范围。
尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。
Claims (1)
1.一种前端动态路由实现方法，其特征在于，使用后端分离时，后端接口用来获取当前登录用户的菜单权限数据，并对菜单权限数据封装为前端方便处理的数据，前端在调用后端接口时将返回的数据二次处理，处理为满足Vue路由方式的数据，最终实现动态的菜单路由展示；
后端对用户权限的封装，使用者根据需求创建不同的角色，并给各个角色授权不同的功能权限，并为不同的用户分配不同的角色，不同的角色访问不同的菜单资源；
菜单资源分为两类，用于访问的菜单信息和非菜单信息，
所述菜单信息为用户可以直观看到的、可以访问的菜单数据；
所述非菜单信息则是用于具体的页面操作或路由跳转；
后端中数据封装方面，用户包括用户ID、用户名称和用户密码，角色包括角色ID和角色名称，菜单包括菜单ID、菜单名称和菜单URL；
数据关联方面，一个用户可以绑定多个角色，一个角色可以授予多个用户，角色可以绑定不同的菜单；
根据角色信息，根据接口获取到相关的菜单数据后，根据前端所需要的数据格式，拆分为非菜单和菜单两部分，同时为每个菜单组装其子菜单，最后将拆分和重组拼接后的菜单数据返回给前端；
不同角色的用户登录系统以后，前端获取到后端的用户权限菜单数据后，首先将数据进行拆分，拆分成必须要显示的静态路由表和可以动态显示的动态路由表；
根据路由表数据系统会生成当前用户可以访问的菜单，实现通过管理员角色对其他用户的管理，管理员前端系统页面的操作对应后端不同的接口来改变用户菜单数据，最终实现不同的用户访问系统时只获取到自己可以访问的菜单内容；
对后端数据的处理，根据后端数据中不同的菜单数据字段对非菜单和菜单进行不同的处理，核心处理为利用条件判断拼接vue所适配的路由信息，其中涉及使用递归的方式来处理父级菜单和子级菜单；
对于菜单为外部链接iframe的，数据条件判断后使用vue中路由的元数据字段进行单独存储，对当前路的路由元数据获取后调用公共组件页面实现外链的展示；
前端只处理菜单数据，不关心角色数据，用户、角色和菜单的关系。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110654670.5A CN113312049B (zh) | 2021-06-11 | 2021-06-11 | 一种前端动态路由实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110654670.5A CN113312049B (zh) | 2021-06-11 | 2021-06-11 | 一种前端动态路由实现方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113312049A CN113312049A (zh) | 2021-08-27 |
| CN113312049B true CN113312049B (zh) | 2023-01-20 |
Family
ID=77378600
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110654670.5A Active CN113312049B (zh) | 2021-06-11 | 2021-06-11 | 一种前端动态路由实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113312049B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO1999024918A1 (en) * | 1997-11-10 | 1999-05-20 | Phase Shift Technology Pty. Ltd. | Dynamic date shifting |
| CA2485334A1 (en) * | 2001-05-17 | 2002-11-21 | Attachmate Corporation | Symbiotic computer application and system and method for generation and presentation of same |
| CN110825352A (zh) * | 2019-09-27 | 2020-02-21 | 苏州浪潮智能科技有限公司 | 一种基于Vue.js和Django的权限控制方法及系统 |
| CN112016128A (zh) * | 2020-10-29 | 2020-12-01 | 北京淇瑀信息科技有限公司 | 基于CRUD和权限管理的vue开发方法及装置 |
| CN112257091A (zh) * | 2020-10-28 | 2021-01-22 | 南开大学 | 一种基于前后端分离的权限控制方法 |
Family Cites Families (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140180883A1 (en) * | 2000-04-26 | 2014-06-26 | Accenture Llp | System, method and article of manufacture for providing tax services in a network-based tax architecture |
| US20040215652A1 (en) * | 2003-03-27 | 2004-10-28 | Joseph Muller | Wireless information system and method |
| WO2021099839A1 (en) * | 2019-11-18 | 2021-05-27 | Roy Mann | Collaborative networking systems, methods, and devices |
| US8918306B2 (en) * | 2011-11-16 | 2014-12-23 | Hartford Fire Insurance Company | System and method for providing dynamic insurance portal transaction authentication and authorization |
| WO2014161587A1 (en) * | 2013-04-05 | 2014-10-09 | Aktiebolaget Skf | Method for processing data obtained from a condition monitoring system |
| US20170124490A1 (en) * | 2015-10-28 | 2017-05-04 | Fractal Industries, Inc. | Inclusion of time series geospatial markers in analyses employing an advanced cyber-decision platform |
| US10796010B2 (en) * | 2017-08-30 | 2020-10-06 | MyMedicalImages.com, LLC | Cloud-based image access systems and methods |
| US10817145B1 (en) * | 2018-11-06 | 2020-10-27 | Centergy Consulting, LLC | System and method for seamlessly integrating an iframe into a webpage |
| CN109784033A (zh) * | 2018-12-13 | 2019-05-21 | 平安科技（深圳）有限公司 | 基于页面菜单的操作权限动态配置方法及相关设备 |
| CN109817347A (zh) * | 2019-01-15 | 2019-05-28 | 深圳市道通科技股份有限公司 | 在线诊断平台、其权限管理方法及权限管理系统 |
| CN110442326B (zh) * | 2019-08-11 | 2023-07-14 | 西藏宁算科技集团有限公司 | 一种基于Vue简化前后端分离权限控制的方法及其系统 |
| CN110780876A (zh) * | 2019-10-29 | 2020-02-11 | 北京北纬通信科技股份有限公司 | web开发前后端分离权限控制方法及系统 |
| CN111475803B (zh) * | 2020-04-15 | 2022-09-02 | 南京甄视智能科技有限公司 | 后台权限管理系统及管理方法 |
| CN111796860B (zh) * | 2020-06-28 | 2024-01-30 | 中国工商银行股份有限公司 | 微前端方案实现方法及装置 |
| CN112487392A (zh) * | 2020-12-08 | 2021-03-12 | 浪潮云信息技术股份公司 | 一种前端实现管理系统权限控制方法 |
-
2021
- 2021-06-11 CN CN202110654670.5A patent/CN113312049B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO1999024918A1 (en) * | 1997-11-10 | 1999-05-20 | Phase Shift Technology Pty. Ltd. | Dynamic date shifting |
| CA2485334A1 (en) * | 2001-05-17 | 2002-11-21 | Attachmate Corporation | Symbiotic computer application and system and method for generation and presentation of same |
| CN110825352A (zh) * | 2019-09-27 | 2020-02-21 | 苏州浪潮智能科技有限公司 | 一种基于Vue.js和Django的权限控制方法及系统 |
| CN112257091A (zh) * | 2020-10-28 | 2021-01-22 | 南开大学 | 一种基于前后端分离的权限控制方法 |
| CN112016128A (zh) * | 2020-10-29 | 2020-12-01 | 北京淇瑀信息科技有限公司 | 基于CRUD和权限管理的vue开发方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| 基于SOA架构的网络资源管理调度系统的设计与实现;姚蓓丽等;《电信快报》;20090710(第07期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113312049A (zh) | 2021-08-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10310835B2 (en) | Modernization of legacy applications using dynamic icons | |
| US10693708B2 (en) | Defining configurable characteristics of a product and associating configuration with enterprise resources | |
| US10841385B2 (en) | Efficient means to test server generated applications on mobile device | |
| EP3198416B1 (en) | Efficient and intuitive databinding for mobile applications | |
| US20190236825A1 (en) | High fidelity interactive screenshots for mobile applications | |
| CN107924411B (zh) | 一种事务系统中ui状态的恢复的方法和系统 | |
| US8250458B2 (en) | Method, system, and software tool for emulating a portal application | |
| WO2016049626A1 (en) | Efficient and intuitive databinding for mobile applications | |
| US9454616B2 (en) | Method and system for unifying configuration descriptors | |
| EP2488941A1 (en) | Automated enterprise software development | |
| US9253020B2 (en) | Web service interaction in a dynamically extensible business application | |
| US11435984B1 (en) | Content management system using an application framework for integrating apps for editing content | |
| US20140156726A1 (en) | Representational State Transfer Communications via Remote Function Calls | |
| US20080209438A1 (en) | Method and apparatus for a service control layer | |
| US11882154B2 (en) | Template representation of security resources | |
| CN113312049B (zh) | 一种前端动态路由实现方法 | |
| Rose | Hands-on serverless computing with Google Cloud: build, deploy, and containerize apps using Cloud Functions, Cloud Run, and cloud-native technologies | |
| US11630856B2 (en) | Handling of Point of Interest (POI) data content | |
| CN114741441A (zh) | 多类型存储引擎对象存储系统、方法和计算机可读介质 | |
| Krause et al. | SharePoint 2010 as a development platform | |
| US20230037019A1 (en) | Techniques for distributed interface component generation | |
| Pippi | Python for Google App Engine | |
| CN118175087A (zh) | 路由注册方法、介质、装置及计算设备 | |
| KR20010072982A (ko) | 애플리케이션들을 로딩하기 위한 컴퓨터 시스템 및 방법 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |