Problems with routing permission management using Vue (detailed tutorial)

This article mainly introduces the sample code about Vue's routing permission management. Now I share it with you and give it as a reference.

Preface

I have done research on vue routing permission management at work. I have seen several related articles in the past few days, plus yesterday It was mentioned again in the interview, so I simply compiled some of my opinions, hoping it will be helpful to everyone.

Implementation

Generally speaking, the idea of ​​​​implementation is very simple. First, the picture above:

is nothing more than routing The configuration is divided into user routing and basic routing according to user type. Different user types may have different user routes, which depends on the actual business.

1. User routing: A routing unique to the current user

2. Basic routing: A routing accessible to all users

There are two ways to achieve control:

Inject routes through the vue-router addRoutes method to achieve control
Restrict route jumps through the vue-router beforeEach hook

addRoutes method :

Get the current user routing configuration by requesting the server, encoding it into the basic format supported by vue-router (the specific encoding depends on the data format negotiated by the front and back ends), by calling this.$router.addRoutes The method injects the encoded user route into the existing vue-router instance to implement user routing.

beforeEach method

Obtain the current user routing configuration by requesting the server, manage each jump of the route by registering the router.beforeEach hook, and check each jump if the target The route is no longer stored in the basic route and the user route of the current user. The jump is canceled and the jump error page is redirected.

Both of the above methods require configuring an error page in vue-router to ensure that users perceive insufficient permissions.

The principles of the two methods are actually the same, except that the addRoutes method tells vue-router by injecting routing configuration: "Currently we only have these routes, and we do not recognize other routing addresses", while beforeEach It relies more on us to manually help vue-router identify which pages can be accessed and which pages cannot be accessed. To put it bluntly, it is the difference between automatic and manual. Speaking of this, I guess everyone will think that since it is automatic, addRoutes must be the most convenient and fast, and it can also simplify the business code. The author thought so at the beginning, but! Many people have overlooked one point: the

addRoutes method only helps you inject new routes, but does not help you eliminate other routes!

Imagine a situation where the user logs in to the administrator account on his or her computer. At this time, the administrator's route will be injected into the routing, and then the user will log out, keep the page from refreshing, and switch to an ordinary user. Log in with the account. At this time, the routes of ordinary users will be injected into the routing. Then, there will be routes for two user types in the routing. Even if the user is not aware of it, ordinary users can also access the administrator's page by changing the URL!

There is also a solution to this problem:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const createRouter = () => new Router({
 mode: 'history',
 routes: []
})
const router = createRouter()
export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher
}
export default router

By creating a new Router, and then assigning the new Router.matcher to the management Router of the current page, in order to update the routing configuration Purpose.

The author made a small demo for everyone to experience.

Regarding the above issues, there have been discussions under the github issues of vue-router, which are:

Add option to Reset/Delete Routes #1436

Feature request: replace routes dynamically #1234

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instances of layui table checkbox selection select all styles and functions

Instances of layui select dynamically adding options

Bootstrap implements collapsible grouped side navigation menu

The above is the detailed content of Problems with routing permission management using Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!