Detailed explanation of dynamic permission control implementation plan based on vue-router

Using vue to develop a permission-based management system, especially using vue-router for routing. One problem that many people encounter is how to dynamically load the component corresponding to the routing path.

A typical application scenario is: the front-end menu is not written statically in the vue program, but is dynamically loaded into the vue application from the menu returned by the background program and the database.

There are many questions about permissions online, but there is almost no good answer to it. For a long time, it has greatly damaged the confidence to use the vue technology stack to develop. The most quality article is:https:///article/

But the author has not completely solved this problem, and there are still several problems:

1) After logging in, jump to the homepage. At this time, the route has been loaded and cannot be changed. The menu can be displayed but there is no route.

2) Front-end applications artificially refresh the webpage routes caused certain problems.

This article solves these two problems based on this article to make them complete.

The premise is to read the article mentioned above carefully, and use the code to speak directly below:

Solution to Problem 1:

After logging in, jump to the homepage. router is the router of vue application. The login method is introduced. Before logging in, the router is changed. The key point of change is to accurately assign the specific place of routes of the router. For example, here is the subroutine of routes[0], and 2 is to use the addRoutes function to make it take effect.

export const login = ({commit}, data) =&gt; { ('/login', (data))
  .then(res =&gt; {
   const success = (, 'OK') &amp;&amp; (, '0')
   if (success) {
    var menus = generateMenus()
     = (menus)
    if ( &lt;= 0) { // Avoid logging in and repeatedly loading routes without refreshing the page after logging out     commit(types.ADD_MENU, menus)
     // Dynamic loading of 2 rows of routing key     [0].(...generateRoutesFromMenu())
     ()
    }
     = 
    ({path: '/'})
   } else {
    commit('loginErr', )
   }
  })
}


function generateRoutesFromMenu (menu = [], routes = []) {
 for (let i = 0, l = ; i &lt; l; i++) {
  let item = menu[i]
  if () {
   (item)
  }
  if (!) {
    = resolve =&gt; require([`views/` +  + `.vue`], resolve)
   generateRoutesFromMenu(, routes)
  }
 }
 return routes
}

Solutions to Problem 2:

It is not to introduce instantiated vue-router js in the main app, but to directly instantiate routers in the app. The purpose is to ensure that dynamic routers are generated every time when web pages are refreshed.

Part of the code:

(Router)
let menus =  //The menu returned after login successfullyif (menus) {
 let items = (menus)
 (ADD_MENU, items)
}

const router = new Router({
 mode: 'hash',
 linkActiveClass: 'is-active',
 scrollBehavior: () =&gt; ({ y: 0 }),
 routes: [
  {
   name: 'Main',
   path: '/',
   component: require('views/'),
   children: [ //The reason why dynamic routing is a subroutine of Main is based on: after logging in, jump to the Main homepage. The homepage is a page loading framework similar to frame. Only by using dynamic routing as a subroutine of Main can other pages be ensured that other pages are displayed in the Main frame.    ...generateRoutesFromMenu()
   ]
  },
  {
   name: 'Login',
   path: '/login',
   component: require('views/')
  }
 ]
})

function generateRoutesFromMenu (menu = [], routes = []) {
 for (let i = 0, l = ; i &lt; l; i++) {
  let item = menu[i]
  if () {
   (item)
  }
  if (!) {
    = resolve =&gt; require([`views/` +  + `.vue`], resolve)
   generateRoutesFromMenu(, routes)
  }
 }
 return routes
}

Also attached menu items code

const state = {
 items: [ // No menu is defined, it is completely returned from the backend ]
}
const mutations = {
 [types.ADD_MENU] (state, menuItems) {
  if ( &gt; 0) {
   (function (item) {
    (function (child) {
      = lazyLoading()
    })
   })
   (...menuItems)
  }
 },

lazyloding

export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)

The git code cannot be fully disclosed for the time being. If you have any questions, please leave a message.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.