Vue后台管理系统权限动态路由

该项目搭建的框架使用的是vue+ant-pro,这里说一下大概思路和流程
**1.首先路由的地方应该分为两块，一块是不需要权限就可以直接登录看到的（看具体需求，也可以一快），一块是需要动态加载的路由信息集合

**
动态路由里面的meta属性里面需要一个字段用来放权限（和登录是后台返回的权限key一样）

然后的思路是登录的时候后台会根据这个账号返回他对应的权限信息，返回权限路由/或者权限key然后拿到这一组权限id和我们的动态路由去做筛选,赛选出对应的路由,然后把这路由添加到vue里面

1.建立一个js(这个js需要放到main.js进行引入)
permission.js

获取用户信息的函数：

在钩子函数里面

**处理函数方法：



最后只需要把过滤好的路由信息放入vue里面

---

可拷贝的代码块：👇

---

permission.js 钩子函数里面代码

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
  if (Vue.ls.get(ACCESS_TOKEN)) {
    /* has token */
    if (to.path === '/user/login') {
      next({ path: defaultRoutePath })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        store
          .dispatch('GetInfo')
          .then(res => {
            console.log(res,'获取用户信息')
            const roles = res.result && res.result.role
            // 进行过滤筛选
            store.dispatch('GenerateRoutes', { roles }).then(() => {
              // 根据roles权限生成可访问的路由表
              // 动态添加可访问路由表
              console.log(roles,'roles')//权限路由permissionList包含key
              console.log(store,'store.getter.addrouter')
              console.log(store.getters.addRouters,'store.getter.addrouter')
              router.addRoutes(store.getters.addRouters)
              // 请求带有 redirect 重定向时，登录自动重定向到该地址
              const redirect = decodeURIComponent(from.query.redirect || to.path)
              if (to.path === redirect) {
                // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
                next({ ...to, replace: true })
              } else {
                // 跳转到目的路由
                next({ path: redirect })
              }
            })
          })
          .catch(() => {
            notification.error({
              message: '错误',
              description: '请求用户信息失败，请重试'
            })
            store.dispatch('Logout').then(() => {
              next({ path: '/user/login', query: { redirect: to.fullPath } })
            })
          })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.name)) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next({ path: '/user/login', query: { redirect: to.fullPath } })
      NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
    }
  }
})

获取用户信息代码块

 // 获取用户信息
    GetInfo({ commit }) {
      return new Promise((resolve, reject) => {
        getInfo().then(response => {
          const result = response.result
console.log(result,'result')
          if (result.role && result.role.permissions.length > 0) {
            const role = result.role
            role.permissions = result.role.permissions
            role.permissions.map(per => {
              if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
                const action = per.actionEntitySet.map(action => { return action.action })
                per.actionList = action
              }
            })
            role.permissionList = role.permissions.map(permission => { return permission.permissionId })
            //role.permissionList.push('myviews')
            commit('SET_ROLES', result.role)
            commit('SET_INFO', result)
          } else {
            reject(new Error('getInfo: roles must be a non-null array!'))
          }
          commit('SET_NAME', { name: result.name, welcome: welcome() })
          commit('SET_AVATAR', result.avatar)

          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

vuex里面的过滤操作代码块

 GenerateRoutes ({ commit }, data) {//data为permission.js传过来的roles
      console.log(data,'筛选函数')
      return new Promise(resolve => {
        const { roles } = data
        console.log(data) 
        console.log('data')
        const accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
        commit('SET_ROUTERS', accessedRouters)
        resolve()
      })
    }
  }



// 过滤函数
function filterAsyncRouter (routerMap, roles) {
  const accessedRouters = routerMap.filter(route => {
    if (hasPermission(roles.permissionList, route)) {
      if (route.children && route.children.length) {
        route.children = filterAsyncRouter(route.children, roles)
      }
      return true
    }
    return false
  })
  return accessedRouters
}




function hasPermission (permission, route) {
  if (route.meta && route.meta.permission) {
    let flag = false
    for (let i = 0, len = permission.length; i < len; i++) {
      flag = route.meta.permission.includes(permission[i])
      if (flag) {
        return true
      }
    }
    return false
  }
  return true
}

**

上述代码自行复制可以按照自己项目中的逻辑需求进行更改。有兴趣的可以去了解Ant

**