場景描述：有權限的路由表

朋友問了我一個問題，他在做權限相關的開發(fā)鸠天，需要把本地的路由表根據(jù)服務端返回的權限表做一個過濾讼育，返回過濾后的路由表。 問我應該如何去寫。

路由表和權限表如下：

//路由：
const routes = [
  {
    name: 'page1',
    auth: 'auth1',
    children: [
      {
        name: 'child-page1',
        auth: 'child-auth1',
        children: [
          {
            name: 'child-child-page1',
            auth: 'child-child-auth1'
          }
        ]
      }
    ]
  },
  {
    name: 'page2',
    auth: 'auth2',
    children: [
      {
        name: 'child-page2',
        auth: 'child-auth2'
      }
    ]
  },
  {
    name: 'page3',
    auth: 'auth3'
  }
];

//權限：
const auths = [
  {
    auth: 'auth1',
    children: [
      {
        auth: 'child-auth1',
        children: [
          {
            auth: 'child-child-auth1'
          }
        ]
      }
    ]
  },
  {
    auth: 'auth3'
  }
];

處理過程：遞歸遍歷路由數(shù)組奶段，遞歸遍歷權限數(shù)組

我想了一下饥瓷，權限表和路由表是兩個數(shù)組，保存的對象都是樹形的對象痹籍，整個過程需要遍歷路由數(shù)組呢铆，然后遍歷路由數(shù)組的過程中通過遍歷權限的數(shù)組來過濾。

整個過程中深層遍歷的過程是需要復用的蹲缠，于是我把這個遍歷過程封裝了一下棺克。

const deepTraversal = (func) => {
  const traversal = (obj) => {
    func(obj);
    if (obj.children) {
      obj.children.forEach((item) => {traversal(item)});
    }
  }
  return traversal;
}

使用方式如下：

// 遍歷路由數(shù)組
deepTraversal((obj) => {
  console.log('路由：' + obj.name);
})(routes);

接下來的工作就剩下遍歷路由數(shù)組的過程中進行過濾，把過濾后的路由保存到另一個數(shù)組中线定，是否過濾通過遍歷權限數(shù)組來決定娜谊。

const filteredRoute = [];
routes.forEach(route => {
  deepTraversal((routeItem) => {
    if (hasAuth(routeItem.auth)) {
      filteredRoute.push(routeItem);
    }
  })(route)  
})
console.log(filteredRoute);

遍歷routes過程中過濾條件hasAuth如下：

const hasAuth = (targetAuth) => {
  let isContain = false;
  auths.forEach((auth) => {
    deepTraversal((authItem) => {
      if (authItem.auth === targetAuth) {
        isContain = true;
      }
    })(auth); 
  })
  return isContain;
}

過濾出的數(shù)組就是有權限的路由數(shù)組了。

總結

可復用的遞歸遍歷過程：樹形對象的遍歷過程是可以復用的斤讥，通過高階函數(shù)把遍歷過程中的操作以參數(shù)傳入因俐，可以用來遍歷、查找周偎、復制等抹剩。