Shulou(Shulou.com)06/03 Report--

This article mainly introduces the vue background management system access control example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

Access control requirements

Because it is a single-page application, routing is controlled by the front end, so it is particularly important to protect some information that requires specific permissions to view. If the front end does not do a good job of permission verification and the back end is negligent, it may lead to data leakage.

For permission control, the requirements are roughly as follows:

For the limitations of large modules, such as those that need to jump through routes, route interception is required.

Restrictions on small functions, such as a button, which does not display if there is no specific permission

Thinking on the level of security

Before taking over a management system, the front end stores the permission list in storage to achieve long-term storage, which is very undesirable, because hacker can obtain specific permissions by manually changing the stored information, and even the system does not intercept routes. if you know the routing of the module, you can directly jump to a specific module by entering routing information. For the permissions of some modules, the permissions can not take effect immediately after being modified by the administrator, so I have done the following thinking and practice for these situations.

The permission will take effect immediately after it is modified by the administrator

For this requirement, my approach is to store the permission information in vuex store after obtaining the permission list, and use the getter function to determine whether the permission can be used, so that once the permission data is updated, the frontend permission limit function point will be automatically modified to achieve real-time permission, which is roughly implemented as follows:

/ / vuex state.jsexport default {userPrivileges: {admin: [], purchaser: []}, / / user rights information} / / vuex getters.jsexport default {canIUse: state = > (role, id) = > state.userPrivileges [role] .roles (id)} / / the canIUse function {{scope.row.allocation_subtotal}} is introduced through mapGetters

In this way, the data is stored in memory, so the permission information cannot be easily modified, and the judgment of the permission is very simple. You only need to pass the permission id of the function point at a specific function point to determine whether this permission can be used.

But there is also a problem when storing data in memory. What about page refresh? The next step is to explain this situation.

You can also judge permissions by refreshing the page.

For the permission interception of large modules, it must be intercepted through routing hooks (this implementation has been explained in many articles, but not specifically here), but the premise of intercepting permissions through routing hooks is that permission information must exist in advance.

This will happen when the page is refreshed. When the page is refreshed, the routing hook is executed first, and then the component lifecycle hook is executed to request the list of permissions. If the permission information does not exist, then the page jumps to the landing page. The experience is not friendly enough.

So my approach is to establish an intermediate page, if the permission verification does not pass, then jump to the middle page, the middle page for permission request, and then determine whether you can jump, in this case, refresh the page experience is better. The approximate code is as follows:

/ / vuex actions.js// by returning a promise Causes store updates to be "synchronized" with subsequent code to execute export default {getUserPrivileges ({commit}) {return fetch.get ({url:'/ currentstaff'}) .then (data = > {commit ('SET_USER_PRIVILEGES_INFO', data.data) return data.data}) .catch (e = > {})} / / router.js// routes that require authentication permissions {path:' suppliers', component: Suppliers Meta: {role: 'admin', privilegeId: 5}} function isCanUseThisModule (to, from) {return to.matched.every (record = > {/ / use routing meta to store corresponding permission information if (record.meta.role) {return store.getters.canIUse (record.meta.role, record.meta.privilegeId)} else {return true / / if no permission is required Directly return true}})} router.beforeEach ((to, from, next) = > {if (isCanUseThisModule (to, from)) {next () / / permission verification passed Skip to next routing} else {next ({path:'/ main/privilegeValidator' / / intermediate page if permission verification fails)}}) / / permission verification intermediate page code sample created () {this.$store.dispatch ('getUserPrivileges') .then (data = > {for (let I = 0) I

Value.privilegeId = data.admin_ permissions [I]. LinkHref}) return}} this.$router.push ('/ login') / / if you don't have any permissions, jump to the landing page})})}

Users can also jump to the middle page of this permission after logging in, and then jump to the corresponding module after judging the permissions.

The above is "vue background management system access control example analysis" all the content of this article, thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.