CN110502912B - Front-end authority routing control method - Google Patents
Front-end authority routing control method Download PDFInfo
- Publication number
- CN110502912B CN110502912B CN201910767433.2A CN201910767433A CN110502912B CN 110502912 B CN110502912 B CN 110502912B CN 201910767433 A CN201910767433 A CN 201910767433A CN 110502912 B CN110502912 B CN 110502912B
- Authority
- CN
- China
- Prior art keywords
- routing
- user
- authority
- instance
- route
- 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
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/60—Protecting data
- G06F21/604—Tools and structures for managing or administering access control systems
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2221/00—Indexing scheme relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F2221/21—Indexing scheme relating to G06F21/00 and subgroups addressing additional information or applications relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F2221/2141—Access rights, e.g. capability lists, access control lists, access tables, access matrices
Abstract
The invention discloses a front-end authority routing control method, which comprises the following steps: step 1, guiding a user to log in and enter a routing initialization module; step 2, the user logs out, enters a route resetting instance module, logs in again through a login page, and enters a route initialization module; step 3, forcibly refreshing the page after the user logs in successfully, and since the characteristic page of Vue can completely reset Vue instance and routing instance data, the front end needs to acquire user login information from the server through the user role ID and the user token, and whether the user login is overdue is judged; by the right control method, the right page is asynchronously loaded through twice verification by combining a hard coding mode and a background return right mode, so that the reliability of front-end data and the safety of a system are improved.
Description
Technical Field
The invention relates to the technical field of front-end application and authority control, in particular to a front-end authority routing control method.
Background
The authority control is not a new thing, as early as the development of the internet, the front end and the back end of a website are coupled together, namely the front end code of the website is a part of the back end code, the control on the user authority generally exists in a website system at the moment, and the processing of the authority such as the page operation, the button operation and the like at the moment is realized by server-side languages such as jsp, php or asp. Since 2010, the front-end technology is developed vigorously, the front-end design concept is advanced day by day, and a front-end and back-end separation architecture is also popularized gradually. Some emerging front-end frameworks such as read, Vue, and Angular have become mainstream of front-end development, and there are two main schemes for right control: one is that the background returns role information, and the front end writes the authority menu in a js file in a hard coding mode, so that the reliability of the authority cannot be ensured due to the lack of a checking process; the other is that the authority list or even the page file path is directly returned through the background, the front end directly reads and loads, and the front end does not perform role and authority verification.
Disclosure of Invention
Aiming at the problems, the invention provides a front-end authority routing control method, which solves the problem that a front end based on Vue.js lacks the verification of user roles and routing authority, and improves the reliability of front-end data and the safety of a system.
The invention realizes the purpose through the following technical scheme:
a front-end authority routing control method comprises the following steps:
step 1, guiding a user to log in and enter a routing initialization module;
step 2, the user logs out, enters a route resetting instance module, logs in again through a login page, and enters a route initialization module;
step 3, forcibly refreshing the page after the user logs in successfully, and since the characteristic page of Vue can completely reset Vue instance and routing instance data, the front end needs to acquire user login information from the server through the user role ID and the user token, and whether the user login is overdue is judged;
if the user login is overdue, the front end empties sessionStorage content, skips the login page and enters a route initialization module;
if the user login is not expired, the step 2 of the route initialization module is executed.
Further, in the step 1: the routing initialization module has the functions of acquiring user data from a server, obtaining the final authority routing through two times of verification and matching according to user roles and authority data in the user data, asynchronously loading the authority routing into the current routing example through an addRoutes method of the routing example, and rendering a page menu according to the current routing example, and is mainly technically characterized by comprising the following steps of:
(1) the front end acquires user data from the server, wherein the user data comprises routing authority data (including each authorized routing ID, a sub-level routing ID and a parent-level routing ID), a user role ID and a user token;
(2) the front end stores the user role ID in the sessionStorage of the browser;
(3) the front end checks for the first time, checks the user role, obtains a user role authority routing table, and obtains a corresponding role authority routing table by matching the role ID of the authority routing table file with the user role ID in the user data;
(4) the front end checks for the second time, checks the road authority route of the current user role, matches and generates authority information, and generates information with the authority route (the route information comprises an access path, a route name, a page component file and sub-route information) by using the authority data in the user data to match the authority route table obtained in the last step (the matching step is shown in figure 2);
(5) the front end asynchronously adds the routing information with authority into the routing example, and loads the corresponding navigation menu to display in the page;
(6) and the front-end authority routing control initialization is completed.
Further, in the step 2: the module for resetting the routing instance, in order to solve the problem that the user has different permissions but can have the permission routing of the last login user, the existing routing instance is covered by building a new routing instance, so as to realize the resetting of the routing, and the module for resetting the routing instance comprises the following steps:
(1) the front end empties sessionStorage content;
(2) creating a new routing instance;
(3) assigning the macher object in the new routing instance to the macher object of the current routing instance;
(4) the front end reset routing instance completes.
The invention has the beneficial effects that:
the invention provides a front-end authority routing control method, and through the authority control method, the reliability of front-end data and the safety of a system are improved by verifying the correct page asynchronously through two times in combination with a hard coding mode and a background authority returning mode.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the embodiments or the drawings needed to be practical in the prior art description, and obviously, the drawings in the following description are only some embodiments of the embodiments, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
Fig. 1 is a main flow diagram of the present invention.
FIG. 2 is a flow chart of the matching rule of the present invention.
Fig. 3 is a flow diagram of a route initialization module of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without making any creative effort, shall fall within the protection scope of the present invention.
In any embodiment, as shown in fig. 1 to 3, a front-end authority routing control method according to the present invention includes the following steps:
step 1, guiding a user to log in and enter a routing initialization module;
step 2, the user logs out, enters a route resetting instance module, logs in again through a login page, and enters a route initialization module;
step 3, forcibly refreshing the page after the user logs in successfully, and since the characteristic page of Vue can completely reset Vue instance and routing instance data, the front end needs to acquire user login information from the server through the user role ID and the user token, and whether the user login is overdue is judged;
if the user login is overdue, the front end empties sessionStorage content, skips the login page and enters a route initialization module;
if the user login is not expired, the step 2 of the route initialization module is executed.
In the step 1: the routing initialization module is used for acquiring user data from a server, obtaining a final authority routing through two times of verification and matching according to user roles in the user data and the authority data, asynchronously loading the final authority routing into a current routing example through an addRoutes method of the routing example, and rendering a page menu according to the current routing example, and is mainly technically characterized by comprising the following steps of:
(1) the front end acquires user data from the server, wherein the user data comprises routing authority data (including each authorized routing ID, a child routing ID and a parent routing ID), a user role ID and a user token;
(2) the front end stores the user role ID in the sessionStorage of the browser;
(3) the front end checks for the first time, checks the user role, acquires a user role authority routing table, and obtains a corresponding role authority routing table by matching the role ID of the authority routing table file with the user role ID in the user data;
(4) the front end checks for the second time, checks the road authority route of the current user role, matches and generates authority information, and generates information with the authority route (the route information comprises an access path, a route name, a page component file and sub-route information) by using the authority data in the user data to match the authority route table obtained in the last step (the matching step is shown in figure 2);
(5) the front end asynchronously adds the routing information with authority into the routing example, and loads the corresponding navigation menu to display in the page;
(6) and the front-end authority routing control initialization is completed.
In the step 2: the module for resetting the routing instance, in order to solve the problem that the routing with different authorities but with the authority of the last login user can be achieved, the existing routing instance is covered by building a new routing instance, so as to achieve the resetting of the routing, and the module for resetting the routing instance comprises the following steps:
(1) the front end empties sessionStorage content;
(2) creating a new routing instance;
(3) assigning the macher object in the new routing instance to the macher object of the current routing instance;
(4) the front end reset routing instance completes.
As shown in fig. 2, the matching step is:
(1) acquiring user data returned by an interface, acquiring a Value of a corresponding user role ID in a local configuration file through user role ID data in the user data, and creating a null array named routes for storing the final routing information;
(2) circularly taking out the routing authority data in the user data, and acquiring a Value of a corresponding primary routing ID in a local configuration file according to the routing ID;
(3) and judging whether the child field in the Value is an empty array. If not, judging whether the corresponding route ID in the user data has a sub-level route and verifying whether the parent-level route ID is correct, if the corresponding route ID passes the verification and has the sub-level route, acquiring the sub-level route ID and the Value of the child field, performing the third step again, otherwise, prompting error information, terminating the process, and resetting the Vue-Router configuration; if the array is empty, performing the step 4;
(4) acquiring a component field in the Value, assembling a file path, introducing a file in an asynchronous loading mode, and replacing the component field;
(5) obtaining a name field and a path field in the Value, forming routing unit information together with the modified component field and the children field, and assembling the child-level routing information into the children field of the parent-level routing information;
(6) adding the assembled routing information into a routing instance through an addRoutes method; and finishing the information matching and assembling, and finishing the matching step.
In a specific embodiment, as shown in fig. 1 to 3, a front-end authority routing control method according to the present invention includes the following specific steps:
(1) under the root directory of the src folder of the project file, a router folder is created, and index. Configuring page routing information without permission in an index.js file, newly establishing a resetRouter method in the index.js file to reset the page routing information, configuring a permission routing table in the router.js file according to the attached figure 1, and exposing the routing table by using an export default;
(2) requesting a background login interface in a login. Routing authority data (example: [1, 2]), user role ID (example: 2), user token (example: xbuqijnksiwqlbcxuq), and stores the user role ID data in sessionStorage of the browser, with the key value "ID";
(3) under the root directory of the src folder of the project file, a store folder is newly created, an index.js file is newly created in the folder, a getRouter method in the file uses user data returned by an interface according to the matching step shown in fig. 2 and a locally configured authority routing table file (namely, the above-mentioned router.js), and if a result array after matching is assumed to be routerPath, then matching results are assembled to obtain final routing information finalRouter;
(4) calling an addRoutes method of Vue-Rouer in a Login.vue file, and adding finalRouter into a route so as to obtain a complete authority route of a user until the initialization of the front-end authority route control is completed;
(5) js of the project is configured with user role ID data in the sessionStorage, and requests a back-end interface according to the user ID data and the user token, and the back-end interface verifies whether the user logs in or not according to the user role ID and the user token data. If the verification is passed, the user logs in, corresponding user data is returned, a getRouter method in the store/index. If the verification fails, returning that the user does not log in, clearing the sessionStorage content, calling a resetRouter method in the router/index.js file to reset a routing instance, and skipping the page to a login page;
(6) when the user logs out or the login information is expired, clearing the content in the sessionStorage, calling a resetRouter method in the router/index.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. The various features described in the foregoing detailed description may be combined in any suitable manner without contradiction, and various combinations that are possible in the present invention will not be further described in order to avoid unnecessary repetition. Any combination of the various embodiments of the present invention can be made, and the same should be considered as the disclosure of the present invention as long as it does not depart from the spirit of the present invention.
Claims (2)
1. A front-end authority routing control method is characterized by comprising the following steps:
step 1, guiding a user to log in and enter a routing initialization module; in the step 1: the routing initialization module has the functions of acquiring user data from a server, obtaining a final authority route through two times of verification and matching according to user roles in the user data and the authority data, asynchronously loading the final authority route into a current routing example through an addRoutes method of the routing example, and rendering a page menu according to the current routing example, and comprises the following steps:
(1) the front end acquires user data from the server, wherein the user data comprises routing authority data, a user role ID and a user token;
(2) the front end stores the user role ID in the sessionStorage of the browser;
(3) the front end checks for the first time, checks the user role, acquires a user role authority routing table, and obtains a corresponding role authority routing table by matching the role ID of the authority routing table file with the user role ID in the user data;
(4) the front end checks for the second time, checks the road authority route of the current user role, matches and generates authority information, and generates information of the authority route by matching the authority data in the user data with the authority route table obtained in the last step;
(5) the front end asynchronously adds the routing information with authority into the routing example, and loads the corresponding navigation menu to display in the page;
(6) the front-end authority routing control initialization is completed;
step 2, the user logs out, enters a route resetting instance module, logs in again through a login page, and enters a route initialization module;
step 3, forcibly refreshing the page after the user logs in successfully, and acquiring user login information from the server by the front end through the user role ID and the user token because the characteristic page of Vue can completely reset Vue instance and routing instance data, and judging whether the user login is overdue or not;
if the user login is overdue, the front end empties sessionStorage content, skips the login page and enters a route initialization module;
if the user login is not expired, the step 2 of the route initialization module is executed.
2. The front-end authority routing control method according to claim 1, wherein in the step 2: the module for resetting the routing instance, in order to solve the problem that the user has different permissions but can have the permission routing of the last login user, the existing routing instance is covered by building a new routing instance, so as to realize the resetting of the routing, and the module for resetting the routing instance comprises the following steps:
(1) the front end empties sessionStorage content;
(2) creating a new routing instance;
(3) assigning the macher object in the new routing instance to the macher object of the current routing instance;
(4) the front end reset routing instance completes.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910767433.2A CN110502912B (en) | 2019-08-19 | 2019-08-19 | Front-end authority routing control method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910767433.2A CN110502912B (en) | 2019-08-19 | 2019-08-19 | Front-end authority routing control method |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110502912A CN110502912A (en) | 2019-11-26 |
| CN110502912B true CN110502912B (en) | 2022-07-12 |
Family
ID=68588605
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910767433.2A Active CN110502912B (en) | 2019-08-19 | 2019-08-19 | Front-end authority routing control method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110502912B (en) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110955872A (en) * | 2019-12-12 | 2020-04-03 | 北京金山云科技有限公司 | Authority control method, device, terminal and medium |
| CN111343172A (en) * | 2020-02-20 | 2020-06-26 | 中国建设银行股份有限公司 | Network access authority dynamic processing method and device |
| CN111881397B (en) * | 2020-06-15 | 2023-11-21 | 明博教育科技股份有限公司 | Method and system for adding access control to static page |
| CN112231658A (en) * | 2020-09-23 | 2021-01-15 | 傲普(上海)新能源有限公司 | VUE-based ERP dynamic authority control method |
| CN112367260A (en) * | 2020-10-13 | 2021-02-12 | 华帝股份有限公司 | Method, system, electronic device and medium for authority management based on dynamic routing |
| CN112487392A (en) * | 2020-12-08 | 2021-03-12 | 浪潮云信息技术股份公司 | Method for realizing authority control of management system by front end |
| CN113591045A (en) * | 2021-02-06 | 2021-11-02 | 陈笑男 | Big data access control method and big data access control equipment |
| CN113254100B (en) * | 2021-05-25 | 2023-08-01 | 四川虹魔方网络科技有限公司 | Method for realizing dynamic loading of multistage route based on Vue |
| CN113468577B (en) * | 2021-07-23 | 2023-06-30 | 福建天晴在线互动科技有限公司 | Authority management method and system based on web architecture |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107147671A (en) * | 2017-06-19 | 2017-09-08 | 上海斐讯数据通信技术有限公司 | One kind is based on website route access right control method, access method and system |
| CN109669597A (en) * | 2018-10-31 | 2019-04-23 | 武汉艺果互动科技股份有限公司 | Front end authority control method, equipment and storage equipment when user browses web sites |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP3073677B1 (en) * | 2015-03-23 | 2018-01-03 | Ale International | Configuration services for user terminals |
| CN106657046A (en) * | 2016-12-13 | 2017-05-10 | 飞狐信息技术（天津）有限公司 | Configurable fine grit authority control method and device |
| CN109784033A (en) * | 2018-12-13 | 2019-05-21 | 平安科技（深圳）有限公司 | Operating right Dynamic Configuration and relevant device based on page menus |
| CN109740379A (en) * | 2019-01-03 | 2019-05-10 | 山东浪潮通软信息科技有限公司 | A kind of front end authority control method |
-
2019
- 2019-08-19 CN CN201910767433.2A patent/CN110502912B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107147671A (en) * | 2017-06-19 | 2017-09-08 | 上海斐讯数据通信技术有限公司 | One kind is based on website route access right control method, access method and system |
| CN109669597A (en) * | 2018-10-31 | 2019-04-23 | 武汉艺果互动科技股份有限公司 | Front end authority control method, equipment and storage equipment when user browses web sites |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110502912A (en) | 2019-11-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110502912B (en) | Front-end authority routing control method | |
| Antonopoulos et al. | Mastering bitcoin | |
| US11669832B2 (en) | Blockchain-implemented method and system for access control on remote internet-enabled resources | |
| Dhillon et al. | Blockchain enabled applications | |
| CN106682028B (en) | Method, device and system for acquiring webpage application | |
| Doglio et al. | REST API Development with Node. js | |
| US10572685B1 (en) | Protecting sensitive data | |
| CN111752968A (en) | Identity file processing method, device, equipment and storage medium | |
| CN103020826B (en) | Payment processing method and server | |
| EP3762889B1 (en) | Secure digital assistant integration in web pages | |
| US9313204B2 (en) | Incrementally changing the availability of a feature | |
| CN113076502A (en) | Parameter control method and system based on request identification | |
| Hawker | Developer's Guide to Social Programming: Building Social Context Using Facebook, Google Friend Connect, and the Twitter API, The | |
| Gross | Ajax patterns and best practices | |
| US11086756B2 (en) | Electronic services use-case testing framework | |
| CN112565369B (en) | Intelligent contract implementation method, application service node, storage medium and system | |
| CN113408254A (en) | Page form information filling method, device, equipment and readable medium | |
| CN109446081A (en) | For the test method of HTML5 webpage, system, equipment and medium | |
| CN110909290B (en) | Method and system for combining multiple systems into large single-page application | |
| CN112861033A (en) | Method and device for executing service | |
| CN112100590A (en) | Tourism big data cloud platform and user authority management method thereof | |
| US20210248603A1 (en) | Blockchain-based transaction processing method and apparatus | |
| CN114721932B (en) | Data processing method, device, equipment and storage medium | |
| US20090300061A1 (en) | System and method for universe generation | |
| Grincalaitis | Mastering Ethereum: Implement advanced blockchain applications using Ethereum-supported tools, services, and protocols |
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 |