About Vue routing permission management

In general, the idea of implementation is very simple, above:

The route configuration is divided into user routes and basic routes by user type. Different user routes may exist for different user types, depending on actual services.

• User routing: Indicates the route unique to the current user
• The basic routing: Indicates a route accessible to all users

There are two ways to achieve control:

1. Vue-router addRoutes is used to inject routes to realize control
2. Restrict route hops with vue-router beforeEach hook

• AddRoutes way:

Request the server to obtain the current user routing configuration, encoded in the basic format supported by vue-Router (the exact encoding depends on the data format negotiated by the front end and back end), by calling
this.$router.addRoutesMethod To implement user routing by injecting coded user routes into an existing VUe-Router instance.

• BeforeEach way

By requesting the server to obtain the current user routing configuration, through registration
router.beforeEachThe hook manages each hop of the route and checks each hop if the destination route does not exist in
The basic routingAnd the current user’s
User routing, cancel the redirect and turn to the redirect error page.

In the preceding two methods, you need to configure the error page on the VUe-router to ensure that users perceive insufficient permissions.

Both methods work the same, except that the addRoutes method tells vue-Router by injecting route configuration: “Right now we only have these routes, we don’t recognize any other routes”, while beforeEach relies more on us manually telling vue-router what pages to go to and what pages to not go to. To put it bluntly, it is the difference between automatic and manual. At this point, I think everyone will think that since it is automatic, it must be the most convenient and fast addRoutes, and can simplify the business code, I also thought so at first, but! What many people miss is this:

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

Imagine a situation like this: Users log on to the administrator account on your computer, at this time to the routing of the routing at the injection, then log out, keep not refresh the page, switch to normal user account to log in, this time again to routing routing into ordinary users, so, in the presence of two types of users of the routing will route, even if the user does not perceive, By changing the URL, ordinary users can also access the administrator’s page!

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 routerCopy the code

To update the route configuration, create a new Router and assign the new router. matcher to the management Router on the current page.

The author made a small demo, we can go to experience.

The above issues have been discussed in vue-Router Github Issues, respectively:

• Add option to Reset/Delete Routes #1436
• Feature request: replace routes dynamically #1234

If you’re interested, take a look.

MINFIVE
Blog.minfive.com/2018/03/03/…
Obtain user passwords using the Css