遞歸獲取對應的權限的路由

本文轉載自查看原文 2019-01-14 11:25 976 vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    // 判斷當前的用戶是否有該路由的權限
    /* 
      routes.filter(route => route.meta.roles.includes(user.role))

      roles 是用戶的權限表 
        [] 可以有多種權限

      route就是對應的路由配置中的路由對象

      roles: ['a', 'b']
      route.meta.roles: ['c']
      
      roles會被循環兩次，
      第一次 role是 'a'
        判斷a是否在route.meta.roles中
      第二次 role是 'b'
        判斷b是否在route.meta.roles中
      最終some的結果為false


      roles: ['a']

      route.meta.roles: ['a', 'b']
        a

      
      roles: ['a']
      route
    */
    const routes = [
      {
        path: '/a',
        meta: {
          roles: ['a', 'b']
        }
      }, {
        path: '/b',
        children: [
          {
            path: 'a',
            meta: {
              roles: ['a']
            }
          }, {
            path: 'b',
            meta: {
              roles: ['b']
            }
          }
        ]
      }
    ]



    function hasPermission(roles, route) {
      if (route.meta && route.meta.roles) {
        return roles.some(role => route.meta.roles.indexOf(role) >= 0)
      } else {
        return true
      }
    }

    /**
     * 遞歸過濾異步路由表，返回符合用戶角色權限的路由表
     * @param asyncRouterMap
     * @param roles
     */
    /* 
    
      asyncRouterMap 是一個路由配置數組
      [
        {
          children: [
            {}
          ]
        }, {}, {}
      ]
    */
    
    function filterAsyncRouter(asyncRouterMap, roles) {

      const accessedRouters = asyncRouterMap.filter(route => {
        if (hasPermission(roles, route)) {
          if (route.children && route.children.length) {
            route.children = filterAsyncRouter(route.children, roles)
          }
          return true
        }
        return false
      })
      return accessedRouters
    }

    console.log(filterAsyncRouter(routes, ['a']))




    /* const routes = [
      {
        path: '/',
        meta: {
          role: ['admin', 'a', 'b']
        },
        children: [
          {
            path: 'a',
            meta: {
              role: ['admin', 'a']
            }
          }
        ]
      }, {
        path: '/edit',
        meta: {
          role: ['admin', 'b']
        }
      }
    ] */


    /* 
      admin  
        /  /a  /edit

      a 
        / /a
      b 
        / /edit
    
    
     */

    function filterRole (arr) {
      const newArr = arr.filter(route => {
        if (route.meta.role.includes('b')) {
          // 當當前路由有role屬性時，判斷當前路由是否有children子路由，如果有子路由，則繼續判斷子路由中是否有role
          if (route.children && route.children.length) {
            // 遞歸篩選有對應權限的路由
            route.children = filterRole(route.children)
          }

          return true
        }
      })
      return newArr
    }
    

    // console.log(newArr)
    // const asyncRoutes = filterRole(routes)

    // 最終調用router.addRoutes(asyncRoutes)    
  </script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue --》動態路由的實現（根據用戶的權限來訪問對應的模塊）通過遞歸的思維來獲取：包含affix: true鍵值對路由器的絕對路徑(父路由和子路由) 遞歸權限樹的實現賦予權限遞歸linux 遞歸靜態路由和直連靜態路由 vue路由權限管理路由權限配置 react的路由權限控制動態路由權限控制 react路由權限設置