前端权限管理一种核心思路的记入

前言

        做一个项目的时候碰到这个问题，为了理清思路写了这篇文章

服务器给的权限数据结构

       是一种树形结构：

data: [
      {
        id: 101,
        authName: '商品管理',
        path: null,
        pid: 0,
        children: [
          {
            id: 104,
            authName: '商品列表',
            path: null,
            pid: 101,
            children: [
              {
                id: 105,
                authName: '添加商品',
                path: null,
                pid: '104,101'
              }
            ]
          }
        ]

权限管理的主要思路

        由于权限过多，不同用户又必须要有不同的权限，是不好直接将权限直接放在用户身上的，所以创建了不同的角色，不同角色先拟定相对应的权限，像主管这个角色就应该拥有全部的权限，而普通用户应该只拥有订单管理和数据统计的权限，并且必须设置一个超级管理员，没有任何人可以改变删除该角色，只能让主管获得这个角色，在页面中也应该隐藏这个角色，这是为了防止操作员的误删角色

        最后将拟定好的角色分给不同类型的用户就可以了

在实现时候的优化

        只有第三层的权限才是实际的权限，所以当用element-ui的树形控件时，需要获得该角色已经拥有的实际权限，本来我是直接用了三层for循环来获得的，也成功运行了但是这可能会涉及到不存在的变量children，并且代码可读性也不高，万一以后套了四层权限岂不是难易维护。

        后更改为递归的方式，递归的结束标准是数据节点是否含有children属性，没有则继续循环函数

getThreeId(node, arr) {
      if (!node.children) {
        return arr.push(node.id)
      }
      node.children.forEach(ele => {
        this.getThreeId(ele, arr)
      })
    },