持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

通过角色获取菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

角色

回顾一下上一节的内容，就是我们在刷新页面时，用户的信息 和 角色的信息，都可以被我们拿到了。

但是呢，到这里还没有完成，因为我们这个用户所拥有的 菜单列表 还没有拿到。

如何拿到呢，其实我们之前已经绑定了，角色和菜单的关系

这一节，我们来处理通过 角色信息 来获取所拥有的 菜单列表

后端API

我们现在所拥有的 角色信息 是一个数组，里面存放的是，当前用户所拥有 角色的id

如何通过 角色id列表 来获取 菜单列表 呢？

是通过 in 这个操作符

我们在目录：controller\user\sql.js 文件中，添加我们的 sql
```
const rolesGetMenu = `select role.menuArrId from role where id in (?)`
```
里面的值为 角色id数组

Express 逻辑

前端通过将 数组id 通过 json.stringify() 的方式转成 字符串，之后发起 get 请求

express 通过 query 来获取参数信息，再通过 JSON.parse() 来转成对象，这个对象直接作为参数给我们的数据库

/** 获取用户菜单信息 */
const rolesGetMenu = (req, res, next) => {
  try {
    const { roleId } = req.query

    const roleIdList = JSON.parse(roleId)

    if (roleIdList.length) {
      const sql = sqlAll.rolesGetMenu
      const sqlArr = [roleIdList]

      sqlConnect(sql, sqlArr, callback)
    } else {
      const code = 200
      const data = {
        message: '',
        userMenusId: []
      }
      useResSend(res, code, data)
    }
  } catch (err) {
    next(err)
  }
}

定义一个菜单数据，将获取到的菜单 push 到数组中

最后进行 id 的一个 去重操作，返回给前端即可

  const callback = (error, results) => {
    if (error) {
      console.log('连接出错')
      return
    }

    let menuIdList = []

    results.forEach((item) => {
      menuIdList = [...menuIdList, ...JSON.parse(item.menuArrId)]
    })

    // 进行去重
    menuIdListSet = [...new Set(menuIdList)]

    // 登陆成功
    const code = 200
    const data = {
      message: '',
      userMenusId: menuIdListSet
    }
    useResSend(res, code, data)
  }

至此，我们成功的获取到这个用户的菜单的id 列表

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

完成了通过 角色id列表，来查询得到 菜单id列表

后台项目 Express-Mysql-Vue3-TS-Pinia 通过角色获取菜单

通过角色获取菜单

引言

角色

后端API

总结