前后端分离（VUE+SPRINGBOOT）七 动态加载路由权限

用户往往需要根据每个用户的不同权限来显示不同的菜单

之前我做过通过后台的权限动态生成router对象，比较麻烦

这里，我们可以通过增加一个router的属性，

这个属性后台返回的权限列表来展现不同的菜单和按钮

这个是我的一个router的配置

{
  path: 'role',
  name: '权限管理',
  component: _import('user/role'),
  meta: {title: '权限管理', icon: 'password'},
  menu: 'role'
},

这里多了一个meun属性，而我后台返回的权限JSON格式：{"userPermission":{"menuList":["role","org","busmanager","user","article"],"roleId":1,"nickname":"超级用户","roleName":"管理员","permissionList":["user:list","user:add","role:update","article:add","org:list","org:add","user:update","org:update","role:add"]

function filterAsyncRouter(asyncRouterMap, menus) {
  const accessedRouters = asyncRouterMap.filter(route => {
    //filter,js语法里数组的过滤筛选方法
    if (hasPermission(menus, route)) {
      if (route.children && route.children.length) {
        //如果这个路由下面还有下一级的话,就递归调用
        route.children = filterAsyncRouter(route.children, menus)
        //如果过滤一圈后,没有子元素了,这个父级菜单就也不显示了
        return (route.children && route.children.length)
      }
      return true
    }
    return false
  })
  return accessedRouters
}

通过这种方法，可以隐藏掉没有权限的菜单，

按钮的话，可以通过下面来控制它显示

function hasPermission(permission) {
  let myPermissions = store.getters.permissions;
  return myPermissions.indexOf(permission) > -1;
}

<el-button type="primary" icon="plus" v-if="hasPermission('org:add')" @click="showCreate">添加
</el-getton>

之前我也遇到一个刷新页面，路由数据消失，这里可以给你一个思路。

下面红色这段，刷新后会执行路由的钩子函数，里面判断你的store.getters.role

如果为空，并你的路径不是登陆路径，则重新取用户信息，初始你的路由和个人信息

这样，你刷新后页面的信息还是一样。

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    //如果已经登录

    if (to.path === '/login') {
      next({path: '/'})
      NProgress.done() // 结束Progress
    } else if (!store.getters.role) {
      store.dispatch('GetInfo').then(() => {
        next({...to})
      })
    } else {
      next()
    }
  } else if (whiteList.indexOf(to.path) !== -1) {
    //如果前往的路径是白名单内的,就可以直接前往
    next()
  } else {
    //如果路径不是白名单内的,而且又没有登录,就跳转登录页面
    next('/login')
    NProgress.done() // 结束Progress
  }
})