vue 權限匹配路由

 permissionList 和 路由列表的匹配。

var routes = [
	  {
	    path: '/user',
	    // component: Layout,
	    redirect: 'noredirect',
	    alwaysShow: true,
	    name: 'userManage',
	    meta: {
	      title: '用戶管理',
	      icon: 'chart'
	    },
	    children: [
	      {
	        path: 'user',
	        // component: () => import('@/views/user/user'),
	        name: 'user',
	        meta: {
	          perms: ['GET /admin/user/list'],
	          title: '會員管理',
	          noCache: true
	        }
	      },
	      {
	        path: 'address',
	        // component: () => import('@/views/user/address'),
	        name: 'address',
	        meta: {
	          perms: ['GET /admin/address/list'],
	          title: '收貨地址',
	          noCache: true
	        }
	      },
	      {
	        path: 'collect',
	        // component: () => import('@/views/user/collect'),
	        name: 'collect',
	        meta: {
	          perms: ['GET /admin/collect/list'],
	          title: '會員收藏',
	          noCache: true
	        }
	      },
	      {
	        path: 'footprint',
	        // component: () => import('@/views/user/footprint'),
	        name: 'footprint',
	        meta: {
	          perms: ['GET /admin/footprint/list'],
	          title: '會員足跡',
	          noCache: true
	        }
	      },
	      {
	        path: 'history',
	        // component: () => import('@/views/user/history'),
	        name: 'history',
	        meta: {
	          perms: ['GET /admin/history/list'],
	          title: '搜索歷史',
	          noCache: true
	        }
	      },
	      {
	        path: 'feedback',
	        // component: () => import('@/views/user/feedback'),
	        name: 'feedback',
	        meta: {
	          perms: ['GET /admin/feedback/list'],
	          title: '意見反饋',
	          noCache: true
	        }
	      }
	    ]
	  },
	  {
	    path: '/mall',
	    // component: Layout,
	    redirect: 'noredirect',
	    alwaysShow: true,
	    name: 'mallManage',
	    meta: {
	      title: '商場管理',
	      icon: 'chart'
	    },
	    children: [
	      {
	        path: 'region',
	        // component: () => import('@/views/mall/region'),
	        name: 'region',
	        meta: {
	          title: '行政區域',
	          noCache: true
	        }
	      },
	      {
	        path: 'brand',
	        // component: () => import('@/views/mall/brand'),
	        name: 'brand',
	        meta: {
	          perms: ['GET /admin/brand/list', 'POST /admin/brand/create', 'GET /admin/brand/read', 'POST /admin/brand/update', 'POST /admin/brand/delete'],
	          title: '品牌製造商',
	          noCache: true
	        }
	      },
	      {
	        path: 'category',
	        // component: () => import('@/views/mall/category'),
	        name: 'category',
	        meta: {
	          perms: ['GET /admin/category/list', 'POST /admin/category/create', 'GET /admin/category/read', 'POST /admin/category/update', 'POST /admin/category/delete'],
	          title: '商品類目',
	          noCache: true
	        }
	      },
	      {
	        path: 'order',
	        // component: () => import('@/views/mall/order'),
	        name: 'order',
	        meta: {
	          perms: ['GET /admin/order/list', 'GET /admin/order/detail', 'POST /admin/order/ordership', 'POST /admin/order/orderrefund', 'POST /admin/order/orderreply'],
	          title: '訂單管理',
	          noCache: true
	        }
	      },
	      {
	        path: 'issue',
	        // component: () => import('@/views/mall/issue'),
	        name: 'issue',
	        meta: {
	          perms: ['GET /admin/issue/list', 'POST /admin/issue/create', 'GET /admin/issue/read', 'POST /admin/issue/update', 'POST /admin/issue/delete'],
	          title: '通用問題',
	          noCache: true
	        }
	      },
	      {
	        path: 'keyword',
	        // component: () => import('@/views/mall/keyword'),
	        name: 'keyword',
	        meta: {
	          perms: ['GET /admin/keyword/list', 'POST /admin/keyword/create', 'GET /admin/keyword/read', 'POST /admin/keyword/update', 'POST /admin/keyword/delete'],
	          title: '關鍵詞',
	          noCache: true
	        }
	      }
	    ]
	  },
	 ]
	 
	 function hasPermission(perms, route) {
	     if(perms.includes(route.name)) {
			return true;
		 }
		 return false;
	 }
	 
	 function filterAsyncRouter(routes, perms) {
	   const res = []
	 
	   routes.forEach(route => {
	     const tmp = { ...route }
	     if (tmp.children) {
	       tmp.children = filterAsyncRouter(tmp.children, perms)
	       if (tmp.children && tmp.children.length > 0) {
	         res.push(tmp)
	       }
	     } else {
	       if (hasPermission(perms, tmp)) {
	         res.push(tmp)
	       }
	     }
	   })
	   return res
	 }