CN110502912A - A kind of front end permission route control method - Google Patents
A kind of front end permission route control method Download PDFInfo
- Publication number
- CN110502912A CN110502912A CN201910767433.2A CN201910767433A CN110502912A CN 110502912 A CN110502912 A CN 110502912A CN 201910767433 A CN201910767433 A CN 201910767433A CN 110502912 A CN110502912 A CN 110502912A
- Authority
- CN
- China
- Prior art keywords
- routing
- user
- permission
- instances
- 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.)
- Granted
Links
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 kind of front end permission route control methods, comprising the following steps: step 1, guidance user logs in, into routing initialization module；Step 2, user logs off, and into resetting routing instances module, is logged in again by login page, into routing initialization module；Step 3, user forces refresh page after logining successfully, since the property pages of Vue can all reset Vue example and routing instances data, so front end is needed to obtain user login information from server-side by user role ID and user token, judge whether user logs in expired；Authority control method through the invention returns to permission mode by verifying the asynchronous correct page of load twice in conjunction with hard coded mode and backstage, improves the safety of the reliability and system of front end data.
Description
Technical field
The present invention relates to front end applications and permission control technology field more particularly to a kind of front end permission route test sides
Method.
Background technique
Permission control is not any Newly Sprouted Things, and early in the early stage of internet development, the front and back end of website is coupled in one
It rises, i.e. the front-end code of website is a part of back-end code, just generally existing to user right in web station system at this time
Control, only the server ends such as jsp, php or asp.net are all transferred in the processing of the permissions such as the page and push-botton operation at that time
Language is realized.Since 2010, front-end technology flourishes, and Front-end Design theory is increasingly advanced, front and back end separator frame
Structure is also gradually popular.Some emerging front end frames are derived therewith, such as React, Vue, Angular, have become front end hair
The mainstream of exhibition, there are mainly two types of schemes for permission control at this time: one is backstages to return to Role Information, and front end uses hard coded form
Permission menu is write in js file, checkout procedure has been lacked, leads to not the reliability for guaranteeing permission；Another kind is by rear
Platform directly returns to permissions list even page file path, front end and directly reads load, and role and permission school are not done in front end
It tests.
Summary of the invention
In view of the above-mentioned problems, the invention proposes a kind of front end permission route control method, before solving based on Vue.js
End lacks the problem of to user role and routing authorization check, improves the safety of the reliability and system of front end data.
The present invention through the following technical solutions to achieve the above objectives:
A kind of front end permission route control method, comprising the following steps:
Step 1, guidance user logs in, into routing initialization module；
Step 2, user logs off, and into resetting routing instances module, is logged in again by login page, into routing
Initialization module；
Step 3, refresh page is forced after user logins successfully, since the property pages of Vue can all reset Vue example
And routing instances data, so needing front end to obtain user from server-side by user role ID and user token logs in letter
Breath judges whether user logs in expired；
If user's login is expired, front end empties sessionStorage content, jumps login page, initializes into routing
Module；
If user's login is not out of date, executed from the step 2 of routing initialization module.
Further scheme is, in the step 1: the function of routing initialization module is to obtain user data from server-side,
According in user data user role and permissions data by verifying and match twice, obtain last permission routing,
It is real according to current routing by being loaded into current routing instances by the way that the addRoutes methods of routing instances is asynchronous by its
Example rendering page menus, be mainly characterized by the following steps are included:
(1) front end obtains user data from server-side, and user data includes that routing permissions data (has permission including each
Route ID and its sub- grade routing ID and parent route ID), user role ID, user token；
(2) front end stores user role ID in the sessionStorage of browser；
(3) front end verifies for the first time, verifies user role, user role permission routing table is obtained, by using number of users
The role ID of user role ID matching permission routing list file in, obtains corresponding role-security routing table；
(4) second of the verification in front end, the right of way of verification active user role limit routing, and matching generation authority information passes through
Permission routing table (matching step is shown in attached drawing 2) obtained in the previous step is matched using the permissions data in user data, generation is had the right
Limit the information of routing (routing iinformation includes access path, routes title, page assembly file, sub-route information)；
(5) front end is asynchronous into routing instances adds the routing iinformation having permission, and loads corresponding navigation menu in page
It is shown in face；
(6) front end permission route test initialization is completed.
Further scheme is, in the step 2: resetting routing instances module, in order to solve to occur user right difference but
The problem of permission routing of last login user can be possessed, is covered existing routing instances by a newly-built routing instances,
Realize the resetting of routing, comprising:
(1) front end empties sessionStorage content；
(2) a new routing instances are created；
(3) the matcher object value in new routing instances is given to the matcher object of current routing instances；
(4) resetting routing instances in front end are completed.
The beneficial effects of the present invention are:
The invention proposes a kind of front end permission route control methods, authority control method through the invention, in conjunction with hard
Coding mode and backstage return to permission mode by verifying the asynchronous correct page of load twice, improve the reliable of front end data
The safety of property and system.
Detailed description of the invention
It to describe the technical solutions in the embodiments of the present invention more clearly, below will be to embodiment or description of the prior art
In required practical attached drawing be briefly described, it should be apparent that, the accompanying drawings in the following description is only the one of the present embodiment
A little embodiments for those of ordinary skill in the art without creative efforts, can also be according to these
Attached drawing obtains other attached drawings.
Fig. 1 is main flow chart of the invention.
Fig. 2 is matching rule flow chart of the invention.
Fig. 3 is routing initialization module flow chart of the invention.
Specific embodiment
To make the object, technical solutions and advantages of the present invention clearer, technical solution of the present invention will be carried out below
Detailed description.Obviously, the described embodiment is only a part of the embodiment of the present invention, instead of all the embodiments.It is based on
Embodiment in the present invention, those of ordinary skill in the art without making creative work it is obtained it is all its
Its embodiment belongs to the range that the present invention is protected.
In any embodiment, as shown in Figure 1-3, a kind of front end permission route control method of the invention, including it is following
Step:
Step 1, guidance user logs in, into routing initialization module；
Step 2, user logs off, and into resetting routing instances module, is logged in again by login page, into routing
Initialization module；
Step 3, refresh page is forced after user logins successfully, since the property pages of Vue can all reset Vue example
And routing instances data, so needing front end to obtain user from server-side by user role ID and user token logs in letter
Breath judges whether user logs in expired；
If user's login is expired, front end empties sessionStorage content, jumps login page, initializes into routing
Module；
If user's login is not out of date, executed from the step 2 of routing initialization module.
In the step 1: the function of routing initialization module is to obtain user data from server-side, according in user data
User role and permissions data by verifying and matching twice, last permission routing is obtained, by passing through routing
The addRoutes method of example by its it is asynchronous be loaded into current routing instances, according to current routing instances render page dish
It is single, be mainly characterized by the following steps are included:
(1) front end obtains user data from server-side, and user data includes that routing permissions data (has permission including each
Route ID and its sub- grade routing ID and parent route ID), user role ID, user token；
(2) front end stores user role ID in the sessionStorage of browser；
(3) front end verifies for the first time, verifies user role, user role permission routing table is obtained, by using number of users
The role ID of user role ID matching permission routing list file in, obtains corresponding role-security routing table；
(4) second of the verification in front end, the right of way of verification active user role limit routing, and matching generation authority information passes through
Permission routing table (matching step is shown in attached drawing 2) obtained in the previous step is matched using the permissions data in user data, generation is had the right
Limit the information of routing (routing iinformation includes access path, routes title, page assembly file, sub-route information)；
(5) front end is asynchronous into routing instances adds the routing iinformation having permission, and loads corresponding navigation menu in page
It is shown in face；
(6) front end permission route test initialization is completed.
In the step 2: resetting routing instances module can possess last login use to solve appearance permission difference but
Existing routing instances are covered by a newly-built routing instances, realize the resetting of routing, wrap by the problem of permission routing at family
It includes:
(1) front end empties sessionStorage content；
(2) a new routing instances are created；
(3) the matcher object value in new routing instances is given to the matcher object of current routing instances；
(4) resetting routing instances in front end are completed.
As shown in Fig. 2, matching step are as follows:
(1) user data that interface returns is obtained, is locally configured by the user role ID data acquisition in user data
The Value value of corresponding user role ID in file, newly-built one is used to store the empty array of last routing iinformation, entitled
routes；
(2) circulation takes out the routing permissions data in user data, and pair in local profile is obtained according to routing ID
The Value value of the level-one routing ID answered；
(3) judge whether children field is sky array in Value value.Array if not empty then judges user data
Whether middle corresponding routing ID has sub- grade route and whether verify its parent routing ID correct, if being verified and having sub- grade routing,
Sub- grade routing ID and the Value value of its children field are then obtained out, carries out third step again, otherwise, prompts mistake letter
Breath, termination process, and Vue-Router is configured and is reset；If it is empty array then carries out step 4；
(4) the component field in Value value is obtained, file path is assembled, by way of asynchronous load, is introduced
File, and replace component field；
(5) obtain Value value in name field and path field, with modified component field and
Children field collectively constitutes a routing unit information, and sub- grade routing iinformation is assembled to the children of parent routing iinformation
Inside field；
(6) routing iinformation after being completed is added in routing instances by addRoutes method；By information matches
And be completed, matching step terminates.
In a specific embodiment, as shown in Figure 1-3, a kind of front end permission route control method of the invention, specifically
Implementation steps are as follows:
(1) under the root of item file src file, router file is created, and new respectively in file
Build index.js and router.js file.Configuration is not necessarily to the page routing iinformation of permission, In in index.js file
ResetRouter method is created in index.js file and resets page routing iinformation, is matched in router.js file according to attached drawing 1
Permission routing table is set, routing table is exposed using export default；
(2) backstage login interface is requested in the Login.vue file under views file, it is assumed that the account of login is
The account that user role ID is 2, then the correspondence user data got have: routing permissions data (example: [1,2]), user angle
Color ID (example: 2), user token (example: xbuqijnksiwqlbcbxuq), and in the sessionStorage of browser
Middle storage user role ID data, key value are " id "；
(3) under the root of item file src file, store file is created, and is created in file
Index.js file, create in file getRouter method with reference to the accompanying drawings 2 the matching step number of users that uses interface to return
List file (i.e. above-mentioned router.js) is routed according to the permission that is locally configured, it is assumed that the result array after matching is
Then routerPath assembles matching result, obtain final routing iinformation finalRouter；
(4) the addRoutes method that Vue-Rouer is called in Login.vue file, finalRouter is added to
In routing, to obtain the complete permission routing of user, so far front end permission route test initialization is completed；
(5) configuration is read in browser sessionStorage when the page is forced to refresh in the main.js of project
User role ID data, and back end interface is requested according to User ID data and user token, back end interface is according to user role ID
Whether logged in user token data verification user.If being verified, user, which has logged in, returns to corresponding user data, adjusts
Routing iinformation is had permission with the getRouter method acquisition inside store/index.js file and calls addRoutes method
The asynchronous routing iinformation that loads is into routing instances；If authentication failed, returns to user and be not logged in, empty in sessionStorage
Hold, the resetRouter method in router/index.js file is called to reset routing instances, page jump to login page；
(6) user logs off or when log-on message is expired, empties the content in sessionStorage, calls
ResetRouter method in router/index.js file resets routing instances, page jump to login page.
The above description is merely a specific embodiment, but scope of protection of the present invention is not limited thereto, any
Those familiar with the art in the technical scope disclosed by the present invention, can easily think of the change or the replacement, and should all contain
Lid is within protection scope of the present invention.Specific technical features described in the above specific embodiments, in not lance
In the case where shield, can be combined in any appropriate way, in order to avoid unnecessary repetition, the present invention to it is various can
No further explanation will be given for the combination of energy.Various embodiments of the present invention can be combined randomly, only
Want it without prejudice to thought of the invention, it should also be regarded as the disclosure of the present invention.
Claims (3)
1. a kind of front end permission route control method, which comprises the following steps:
Step 1, guidance user logs in, into routing initialization module；
Step 2, user logs off, and into resetting routing instances module, is logged in again by login page, initial into routing
Change module；
Step 3, user login successfully after force refresh page, due to the property pages of Vue can all reset Vue example and
Routing instances data are sentenced so front end is needed to obtain user login information from server-side by user role ID and user token
Whether disconnected user logs in expired；
If user's login is expired, front end empties sessionStorage content, jumps login page, initializes mould into routing
Block；
If user's login is not out of date, executed from the step 2 of routing initialization module.
2. a kind of front end permission route control method as described in claim 1, which is characterized in that in the step 1: routing is initial
Change module function be from server-side obtain user data, according in user data user role and permissions data pass through two
Secondary verification and matching obtain last permission routing, by the addRoutes method by routing instances by its it is asynchronous plus
It is downloaded in current routing instances, renders page menus according to current routing instances, be mainly characterized by including following step
It is rapid:
(1) front end obtains user data from server-side, and user data includes routing permissions data, user role ID, user
token；
(2) front end stores user role ID in the sessionStorage of browser；
(3) front end verifies for the first time, verifies user role, user role permission routing table is obtained, by using in user data
User role ID matching permission routing list file role ID, obtain corresponding role-security routing table；
(4) second of the verification in front end, the right of way of verification active user role, which limits, to be routed, matching generation authority information, by using
Permissions data in user data matches permission routing table obtained in the previous step, generates the information for having permission routing；
(5) front end is asynchronous into routing instances adds the routing iinformation having permission, and loads corresponding navigation menu in the page
It shows；
(6) front end permission route test initialization is completed.
3. a kind of front end permission route control method as described in claim 1, which is characterized in that in the step 2: resetting routing
Example module, in order to solve the problems, such as that the permission routing of last login user can be possessed by user right difference occur but, by new
It builds a routing instances to cover existing routing instances, realizes the resetting of routing, comprising:
(1) front end empties sessionStorage content；
(2) a new routing instances are created；
(3) the matcher object value in new routing instances is given to the matcher object of current routing instances；
(4) resetting routing instances in front end are completed.
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 true CN110502912A (en) | 2019-11-26 |
| CN110502912B 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) |
Cited By (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 |
| CN111881397A (en) * | 2020-06-15 | 2020-11-03 | 明博教育科技股份有限公司 | 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 |
| CN112818399A (en) * | 2021-02-06 | 2021-05-18 | 陈笑男 | Big data access authority dynamic adjustment method and big data access control equipment |
| CN113254100A (en) * | 2021-05-25 | 2021-08-13 | 四川虹魔方网络科技有限公司 | Vue-based multi-level routing dynamic loading implementation method |
| CN113468577A (en) * | 2021-07-23 | 2021-10-01 | 福建天晴在线互动科技有限公司 | Authority management method and system based on web architecture |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160285681A1 (en) * | 2015-03-23 | 2016-09-29 | Ale International | Configuration services for user terminals |
| CN106657046A (en) * | 2016-12-13 | 2017-05-10 | 飞狐信息技术（天津）有限公司 | Configurable fine grit authority control method and device |
| 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 |
| CN109740379A (en) * | 2019-01-03 | 2019-05-10 | 山东浪潮通软信息科技有限公司 | A kind of front end authority control method |
| CN109784033A (en) * | 2018-12-13 | 2019-05-21 | 平安科技（深圳）有限公司 | Operating right Dynamic Configuration and relevant device based on page menus |
-
2019
- 2019-08-19 CN CN201910767433.2A patent/CN110502912B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20160285681A1 (en) * | 2015-03-23 | 2016-09-29 | Ale International | Configuration services for user terminals |
| CN106657046A (en) * | 2016-12-13 | 2017-05-10 | 飞狐信息技术（天津）有限公司 | Configurable fine grit authority control method and device |
| 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 |
| 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 |
Non-Patent Citations (2)
| Title |
|---|
| 李培等: "基于角色的用户管理模型及其实现", 《云南民族大学学报(自然科学版)》 * |
| 路雯雯: "支持前后端分离的JavaScript开发框架的研究及在内容管理系统中的应用", 《支持前后端分离的JAVASCRIPT开发框架的研究及在内容管理系统中的应用》 * |
Cited By (13)
| 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 |
| CN111881397A (en) * | 2020-06-15 | 2020-11-03 | 明博教育科技股份有限公司 | 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 |
| CN112818399A (en) * | 2021-02-06 | 2021-05-18 | 陈笑男 | Big data access authority dynamic adjustment method and big data access control equipment |
| CN112818399B (en) * | 2021-02-06 | 2021-09-10 | 曙光星云信息技术（北京）有限公司 | Big data access authority dynamic adjustment 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 |
| CN113254100A (en) * | 2021-05-25 | 2021-08-13 | 四川虹魔方网络科技有限公司 | Vue-based multi-level routing dynamic loading implementation method |
| CN113468577A (en) * | 2021-07-23 | 2021-10-01 | 福建天晴在线互动科技有限公司 | Authority management method and system based on web architecture |
| CN113468577B (en) * | 2021-07-23 | 2023-06-30 | 福建天晴在线互动科技有限公司 | Authority management method and system based on web architecture |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110502912B (en) | 2022-07-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110502912A (en) | A kind of front end permission route control method | |
| CN109194673A (en) | Authentication method, system, equipment and storage medium based on authorized user message | |
| CN101159557B (en) | Single point logging method, device and system | |
| CN108600203A (en) | Secure Single Sign-on method based on Cookie and its unified certification service system | |
| Mularien | Spring Security 3 | |
| CN106131047A (en) | Account login method and relevant device, account login system | |
| US20060031855A1 (en) | System and method for runtime interface versioning | |
| CN104883351B (en) | Multiple-factor authentication method and device | |
| US20030159063A1 (en) | Automated security threat testing of web pages | |
| CN105812350B (en) | Cross-platform single sign-on system | |
| MX2013013856A (en) | Systems and methods for managing secure communication sessions with remote devices. | |
| CN107329849B (en) | Data verification method and system based on Java system | |
| CN105357196A (en) | Network login method and system | |
| CN108804946A (en) | A kind of table button authority control method based on Vue.js | |
| CN105812357A (en) | User password management method for cloud computing platform | |
| US8984599B2 (en) | Real time password generation apparatus and method | |
| CN108616540A (en) | A kind of platform authentication method and system filtering certification with statement formula based on cross-platform Encryption Algorithm | |
| CN105354482A (en) | Single sign-on method and device | |
| Spilca | Spring security in action | |
| Ramtohul et al. | Information security governance for e-services in southern African developing countries e-Government projects | |
| CN110324344A (en) | The method and device of account information certification | |
| CN106888086A (en) | A kind of system and method for managing account number cipher | |
| CN104348791A (en) | Single sign on method and system | |
| CN107682321B (en) | A kind of method and device of SDN controller cluster single-sign-on | |
| CN111581616B (en) | Multi-terminal login control method and device |
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 |