如何使用vue-router实现动态权限控制

本篇内容介绍了“如何使用vue-router实现动态权限控制”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

使用vue开发带权限管理系统，尤其是采用了vue-router做路由，很多人都遇到的一个问题就是如何动态加载路由path对应的component。

典型的应用场景就是：前端菜单不静态的写在vue程序里，而是要从后台程序和数据库返回的菜单来动态加载到vue应用中。

网上很多问权限的问题，但几乎找不到很好的解决答案，在很长一段时间里，非常打击使用vue技术栈开发的信心。问题是：

1）登录之后跳转到首页，此时路由已经是加载完成的了不能更改，菜单可以显示但是没有路由。

2）前端应用人为刷新网页路由产生某些问题。

问题1的解决思路：

登录之后跳转到首页，router是vue应用的router 引入进登录方法，在登录之后跳转之前对router进行改变，改变要点1是精确赋值到router的routes具体地方，比如我这里是routes[0]的子路由，2是用addRoutes函数使其生效。

登录功能的js

export const login = ({commit}, data) => { Service.post('/login', Qs.stringify(data))  .then(res => {   const success = Object.is(res.statusText, 'OK') && Object.is(res.data.code, '0')   if (success) {    var menus = generateMenus(res.data.menus)    window.sessionStorage.routes = JSON.stringify(menus)    if (menuModule.state.items.length <= 0) { // 避免注销后在不刷新页面的情况下再登录重复加载路由     commit(types.ADD_MENU, menus)     // 动态加载路由关键2行     router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items))     router.addRoutes(router.options.routes)    }    window.sessionStorage.loginName = data.loginName    router.push({path: '/'})   } else {    commit('loginErr', res.data.msg)   }  })}function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) {  let item = menu[i]  if (item.path) {   routes.push(item)  }  if (!item.component) {   item.component = resolve => require([`views/` + item.component + `.vue`], resolve)   generateRoutesFromMenu(item.children, routes)  } } return routes}

问题2的解决思路：

是不在主app里引入实例化vue-router的js，而是直接在app里实例化router，目的就是网页刷新的时候每次都确保生成动态的router。

app.js部分代码：

Vue.use(Router)let menus = window.sessionStorage.routes //登录成功返回的菜单if (menus) { let items = JSON.parse(menus) store.commit(ADD_MENU, items)}const router = new Router({ mode: 'hash', linkActiveClass: 'is-active', scrollBehavior: () => ({ y: 0 }), routes: [  {   name: 'Main',   path: '/',   component: require('views/Main.vue'),   children: [ //动态路由之所以作为Main的子路由是基于：登录之后跳转到Main主页，该主页是类似于frame的页面加载框架，只有将动态路由作为Main的子路由才能确保其他页面显示到Main框架内。    ...generateRoutesFromMenu(menuModule.state.items)   ]  },  {   name: 'Login',   path: '/login',   component: require('views/Login.vue')  } ]})function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) {  let item = menu[i]  if (item.path) {   routes.push(item)  }  if (!item.component) {   item.component = resolve => require([`views/` + item.component + `.vue`], resolve)   generateRoutesFromMenu(item.children, routes)  } } return routes}

另附menu items代码

const state = { items: [ // 什么菜单都不定义，完全由后端返回 ]}const mutations = { [types.ADD_MENU] (state, menuItems) {  if (menuItems.length > 0) {   menuItems.map(function (item) {    item.children.map(function (child) {     child.component = lazyLoading(child.component)    })   })   state.items.push(...menuItems)  } },

lazyloding

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

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

“如何使用vue-router实现动态权限控制”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！