本篇文章主要介绍了详解基于vue-router的动态权限实现方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

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

最新资讯
水滴公司捐赠100万元设驰援疫区专项基金

水滴公司捐赠100万元

针对武汉新型冠状病毒感染的肺炎疫情,水滴公司捐赠100
趣头条驰援湖北 首批捐赠20万口罩1000套防护服

趣头条驰援湖北 首批

趣头条26日决定对湖北疫区捐赠总价值100万元的医疗物
《囧妈》上线三日播放量超6亿 总观看人次1.8亿

《囧妈》上线三日播放

截至1月27日零时,电影《囧妈》在头条系四平台(抖音、西
爱奇艺向武汉等地区捐赠1000万元及电视剧播出版权

爱奇艺向武汉等地区捐

爱奇艺在其官微宣布宣布向武汉市等疫情严重地区捐赠10
经纬中国出资600万设“关爱一线医护人员”基金计划

经纬中国出资600万设

新型冠状病毒肺炎疫情牵动全国关注,经纬中国决定,机构以
抗击疫情 梅花创投联合梅花帮成员企业筹集百万善款

抗击疫情 梅花创投联

新型冠状病毒肺炎疫情牵动全国关注,梅花创投联合梅花帮
最新文章
jQuery设置下拉框显示与隐藏效果的方法分析

jQuery设置下拉框显示

这篇文章主要介绍了jQuery设置下拉框显示与隐藏效果的
策略模式实现 Vue 动态表单验证的方法

策略模式实现 Vue 动

策略模式(Strategy Pattern)又称政策模式,其定义一系列的
Layui Form 自定义验证的实例代码

Layui Form 自定义验

今天小编就为大家分享一篇Layui Form 自定义验证的实
图解NodeJS实现登录注册功能

图解NodeJS实现登录注

这篇文章主要介绍了NodeJS实现登录注册功能,本文图文
基于Layui自定义模块的使用方法详解

基于Layui自定义模块

今天小编就为大家分享一篇基于Layui自定义模块的使用
layer弹出层自适应高度,垂直水平居中的实现

layer弹出层自适应高

今天小编就为大家分享一篇layer弹出层自适应高度,垂直