详解基于vue-router的动态权限控制实现方案

站长资源 2024/11/28 佚名

2 0 1

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

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

网上很多问权限的问题，但几乎找不到很好的解决答案，在很长一段时间里，非常打击使用vue技术栈开发的信心。最有质量的一篇文章是：https://www.jb51.net/article/124801.htm

但作者并没有完全解决这个问题，还留有几个问题是：

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`)

git代码暂不能全部公开，有问题可留言。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

vue,router,权限,vue-router,动态权限,vuerouter,权限控制

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解基于vue-router的动态权限控制实现方案”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

详解基于vue-router的动态权限控制实现方案

Node.js利用断言模块assert进行单元测试的方法

node.js学习之断言assert的使用示例

评论“详解基于vue-router的动态权限控制实现方案”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接