基于vue-router的动态权限实现方案

purpleelephant 发布于7月前 •最后由 逸无尘3月前回复 阅读13054次
1 条评论

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

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

网上很多问权限的问题,但几乎找不到很好的解决答案,在很长一段时间里,非常打击使用vue技术栈开发的信心。最有质量的一篇文章是:
http://blog.csdn.net/s8460049...
但作者并没有完全解决这个问题,还留有几个问题是:
1)登录之后跳转到首页,此时路由已经是加载完成的了不能更改,菜单可以显示但是没有路由。
2)前端应用人为刷新网页路由产生某些问题。

本文即在这篇文章的基础上对这两个问题解决,以使其完整。

前提是认真拜读上面提到的那篇文章,下面直接用代码说话:

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

登录功能的js

export const login = ({commit}, data) => {
  Service.post('/cdn/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)
        commit(types.ADD_MENU, menus) // 先将菜单数据改变
        if (!store.state.menu.isLoadRoutes) {
          commit(types.LOAD_ROUTES)
        }
        window.sessionStorage.loginName = data.loginName

        // 动态加载路由关键2行
        router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items))
        router.addRoutes(router.options.routes)

        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) {
  if (store.state.menu.isLoadRoutes) {
    store.commit(LOAD_ROUTES)
  } else {
    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: [
        ...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: [  // 什么菜单都不定义,完全由后端返回
  ],
  isLoadRoutes: false
}
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`)

github暂不能公开全部代码,有问题继续联系。

查看原文: 基于vue-router的动态权限实现方案

  • 逸无尘
  • 逸无尘

    你好,请问全部源码能分享下嘛

    #1楼, 3月前 回复
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。