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


Posted in Javascript onSeptember 28, 2017

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

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

网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心。最有质量的一篇文章是:https://3water.com/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代码暂不能全部公开,有问题可留言。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现点击消失的代码
Mar 03 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
node.js学习之断言assert的使用示例
Sep 28 #Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 #Javascript
node.js学习之事件模块Events的使用示例
Sep 28 #Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 #Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 #Javascript
jquery实现左右轮播图效果
Sep 28 #jQuery
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP 柱状图实现代码
2009/12/04 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
JS获取当前时间戳方法解析
2020/08/29 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python读写文件方法总结
2015/06/09 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
想学python 这5本书籍你必看!
2018/12/11 Python
kafka-python批量发送数据的实例
2018/12/27 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python判断无向图环是否存在的示例
2019/11/22 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
时尚圣经:The Fashion Bible
2019/03/03 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
我的理想演讲稿
2014/04/30 职场文书
北京奥运会主题口号
2014/06/13 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年教师节慰问信
2015/03/23 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
工作年限证明模板
2015/06/15 职场文书
事业单位岗位说明书
2015/10/08 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫