vue element admin 动态路由，后端thinkphp5.1托管权限和路由

本文主要是介绍vue element admin 动态路由，后端thinkphp5.1托管权限和路由，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

转载请注明出处 https://www.cnblogs.com/leesen/p/14640405.html，或将追究侵权责任

一、背景

背景部分引自 vue element admin 花裤衩

先说一说我权限控制的主体思路，前端会有一份路由表，它表示了每一个路由可访问的权限。当用户登录之后，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。但这些控制都只是页面级的，说白了前端再怎么做权限控制都不是绝对安全的，后端的权限验证是逃不掉的。

我司现在就是前端来控制页面级的权限，不同权限的用户显示不同的侧边栏和限制其所能进入的页面(也做了少许按钮级别的权限控制)，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。

作者：花裤衩
链接：https://juejin.cn/post/6844903478880370701
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

CREATE TABLE `cmf_ls_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `path` varchar(255) DEFAULT '#',
  `pid` int(11) DEFAULT '0',
  `url` varchar(255) DEFAULT '#',
  `redirect` varchar(255) DEFAULT '#',
  `hidden` varchar(10) DEFAULT NULL,
  `alwaysShow` varchar(10) DEFAULT NULL,
  `meta` text,
  `component` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;

*菜单表的各个字段对应的是前端route/index.js对应的格式，字段意义同前端，其中pid表示菜单上级的id，顶级菜单为0

用户表

CREATE TABLE `cmf_ls_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `create_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  `roles` varchar(255) DEFAULT '[]',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

*其中 roles 是 cmf_ls_user_role 表的id的集合，这里是用一个字段简单实现，复杂业务可能需要有一张用户和身份的对照表

身份表

CREATE TABLE `cmf_ls_user_role` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `description` varchar(255) DEFAULT NULL,
  `menu_ids` varchar(255) DEFAULT NULL,
  `create_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

*menu_ids 是 cmf_ls_menu 表的id的集合

其余php控制器、模型等就不在贴出来了，以下把主要的前端获取动态路由的返回的数据格式贴出来：

{
    "code": 200,
    "msg": "",
    "data": [{
        "id": 1,
        "name": "users",
        "path": "/users",
        "pid": 0,
        "url": "#",
        "redirect": "/users/list",
        "hidden": false,
        "alwaysShow": false,
        "meta": {
            "icon": "el-icon-s-help",
            "status": true,
            "title": "RBAC权限管理"
        },
        "component": "#",
        "label": "RBAC权限管理",
        "children": [{
            "id": 2,
            "name": "userlist",
            "path": "userlist",
            "pid": 1,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "el-icon-s-help",
                "status": true,
                "title": "用户列表"
            },
            "component": "/rbac/userlist",
            "label": "用户列表",
            "children": []
        }, {
            "id": 3,
            "name": "menulist",
            "path": "menulist",
            "pid": 1,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "el-icon-s-help",
                "status": true,
                "title": "菜单管理"
            },
            "component": "/rbac/menulist",
            "label": "菜单管理",
            "children": []
        }, {
            "id": 10,
            "name": "RoleList",
            "path": "rolelist",
            "pid": 1,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "",
                "status": true,
                "title": "身份管理"
            },
            "component": "/rbac/rolelist",
            "label": "身份管理",
            "children": []
        }]
    }, {
        "id": 4,
        "name": "icon",
        "path": "/icon",
        "pid": 0,
        "url": "#",
        "redirect": "#",
        "hidden": false,
        "alwaysShow": false,
        "meta": {
            "icon": "icon",
            "status": true,
            "title": "icon"
        },
        "component": "#",
        "label": "icon",
        "children": [{
            "id": 9,
            "name": "Icons",
            "path": "index",
            "pid": 4,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "icon",
                "status": true,
                "title": "Icons"
            },
            "component": "/icons/index",
            "label": "Icons",
            "children": []
        }]
    }, {
        "id": 5,
        "name": "Permission",
        "path": "/permission",
        "pid": 0,
        "url": "#",
        "redirect": "/permission/page",
        "hidden": false,
        "alwaysShow": false,
        "meta": {
            "icon": "lock",
            "status": true,
            "title": "Permission"
        },
        "component": "#",
        "label": "Permission",
        "children": [{
            "id": 6,
            "name": "PagePermission",
            "path": "page",
            "pid": 5,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "",
                "status": true,
                "title": "Page Permission"
            },
            "component": "/permission/page",
            "label": "Page Permission",
            "children": []
        }, {
            "id": 7,
            "name": "DirectivePermission",
            "path": "directive",
            "pid": 5,
            "url": "#",
            "redirect": "#",
            "hidden": false,
            "alwaysShow": false,
            "meta": {
                "icon": "",
                "status": true,
                "title": "Directive Permission"
            },
            "component": "/permission/directive",
            "label": "Directive Permission",
            "children": []
        }]
    }]
}

php部分实现了无限级菜单，用户多选身份，身份下配置菜单权限，从而达到不同身份不同菜单的结果。

三、前端部分

首先前端需要把/src/router/index.js 中的asyncRouters即动态路由部分清空

export const asyncRoutes = [];

然后在/src/api/user.js中添加如下方法，定义一个获取后端动态菜单的接口，接口路径和参数换成你自己的

export function getAuthMenu(data){
  return request({
    url: '/ls/menu/getAuthMenuByRoles',
    method: 'post',
    data
  })
}

下面是/src/store/modules/permission.js的完整代码

import { asyncRoutes, constantRoutes } from '@/router'
import { getAuthMenu } from '@/api/user'
import Layout from '@/layout'

/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

export const loadView = view => {
  // 路由懒加载
  return resolve => require(['@/views' + view], resolve)
}
/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @param routes
 */
export function generaMenu(routes, data) {
  data.forEach(item => {
    const menu = {
      path: item.path,
      component: item.component === '#' ? Layout : loadView(item.component),
      hidden: item.hidden,
      children: [],
      name : item.name,
      meta: item.meta
    }
    if(item.pid == 0){
      menu.redirect = item.redirect;
    }

    if (item.children) {
      generaMenu(menu.children, item.children)
    }
    routes.push(menu)
  })
  routes.push({ path: '*', redirect: '/404', hidden: true })
}

/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */
export function filterAsyncRoutes(routes, roles) {
  const res = []

  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })

  return res
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      const loadMenuData = []
      getAuthMenu(state.token).then(response => {
        let data = response
        if (response.code !== 200) {
          alert(JSON.stringify('菜单数据加载异常'))
        } else {
          data = response.data
          Object.assign(loadMenuData, data)
          const tempAsyncRoutes = Object.assign([], asyncRoutes)
          generaMenu(tempAsyncRoutes, loadMenuData)
          let accessedRoutes
          if (roles.includes('admin')) {
            accessedRoutes = tempAsyncRoutes || []
          } else {
            accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
          }
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes)
        }
      }).catch(error => {
        console.log(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

里面的 generateRoutes 方法 和 generaMenu 方法是用来获取后端返回的菜单，然后处理成前端需要的router的格式

最后是后台菜单界面截图和说明

用户管理

 身份设置

 身份管理

身份权限设置

 这里使用了 el-tree ，选中菜单后给后台传递的就是，tree.getCheckedKeys()，也就是包含各个选中菜单的id的集合（子级全选那么父级也会选中，子级没有全选那么父级会是半选，此时获取的选中key里就不会有父级，我们就将这个数据原样传递给后台。后台返回的动态菜单里，需要递归往上根据菜单PID判断查找父级的id，最终实现即时子菜单不是全选的，返回的菜单里也有父级，当然子菜单一个都没选的话，父级肯定也不需要了，否则前端的菜单是不会展示没父级的选中菜单的）

然后是菜单的管理

 pid因为是无限级，所以后台需要返回如下树结构

 其中 顶级菜单 是前端固定拼到后台给的树结构中的，可能会如下图

其中splpre字段就是子菜单的前缀，顶级无前缀，下级有一个 ' - '，再下级就是 ‘ - - ’，以此类推（这里是后端给的，主要为了让树结构看起来清晰）

需要特别说明的是添加菜单这里，如果是顶级菜单无下级，那么肯定需要在component里填上组件的路径，如文件路径 /src/view/user/index.vue ，就需要在component字段写上 /user/index，因为permission.js中loadview方法拼接了模板；如果是父级菜单有下级，那么component填上#就行。

另外需要特别说明的是 redirect字段，如果是顶级菜单有下级，则需要填上默认能跳转到子菜单的path。

如果前端改完后报 Module build failed (from ./node_modules/eslint-loader/index.js): TypeError: Cannot read property 'range' of null，

一般是由下图部分引起的（如果使用() => import(`@/views${item.component}`)导入的话）

 本人亲测，通过对babel-eslint 降级到7.2.3成功处理这个问题。。。具体方法百度

至此简易的后台配置vue element admin 动态菜单 动态路由 动态权限 就完成了。

这篇关于vue element admin 动态路由，后端thinkphp5.1托管权限和路由的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！