【vue element admin】服务端控制侧边栏显示权限详细教程

写在前面：

服务端语言：golang        框架：gin

vue element admin版本：4.0.0

 

概览：

修改文件：src/permission.js、src/store/modules/permission.js、 src/router/index.js

 

具体修改：

    1、src/router/index.js

注意：每个菜单节点都要设置name，且都不能重复。是根据name来判断权限，服务端存储是一个角色的菜单权限，用name组成一维数组。示例：["logview","logview_cms"] 。roles 写死 admin。

  2、src/permission.js  

修改上面的两处。data是用户的信息，通过服务端获取。里面有用户所属角色的权限信息。data返回的json格式如下：

主要是根据 rolesView 来过滤权限

3、src/store/modules/permission.js

主要是这个文件，进行侧边栏权限的过滤。

a、先看generateRoutes方法

generateRoutes({ commit }, data) {
    return new Promise(resolve => {
      const {roles} =data
      const { routesMap } = data
      const { rolesView } = data
  
      let accessedRoutes
        if (roles.includes('admin')) {
          accessedRoutes = asyncRoutes
        } else {
            //修改下面的一行代码。见解释1
          accessedRoutes = filterServeAsyncRoutes(asyncRoutes, rolesView)
        }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }

解释1：传递了 rolesView ，这个是从用户信息获取的权限。就是上面说的router里的“name”

b、filterServeAsyncRoutes 方法

这方法参考已有的方法自己写，代码如下

 

/**
根据后台权限过滤路由@孟瑜
*/
export function filterServeAsyncRoutes(routes, rolesview) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    //console.log(tmp)
    if (hasServePermission(rolesview, tmp)) {
      if (tmp.children) {
        tmp.children = filterServeAsyncRoutes(tmp.children, rolesview)
      }
      res.push(tmp)
    }
  })

  return res
}

c、参考已有的方法，自己写下面的方法

function hasServePermission(rolesview, route) {
  if (route.name) {
    return rolesview.includes(route.name)
  } else {
    return true
  }
}

总体思路：

服务端保存route里的“name”

前端根据“name”进行菜单过滤。

4、权限设置页面，可以用框架里自带的页面。保存的时候，只保存“name”即可。