1. 程式人生 > 實用技巧 >【VUE】實現一個常見的路由攔截表

【VUE】實現一個常見的路由攔截表

我們經常需要根據路由表劃定許可權,在前端開發中,可以通過劃定某種具體許可權的路由表,來決定一些指定的路由是否應該應用某些操作

 1 function checkRouteByRule(ruleRoute,path) {
 2     let flag = false;
 3 
 4     let metaList = ruleRoute.map(item => {
 5         let perRouterMetaList = item.split("/").filter(function (s) {
 6             //去除陣列內元素為空的元素
 7             return
s && s.trim(); 8 }) 9 return perRouterMetaList 10 }) 11 12 let pathMeta = path.split("/").filter(function (s) { 13 //去除陣列內元素為空的元素 14 return s && s.trim(); 15 }) 16 17 for (let i = 0; i < metaList.length; i++) { 18 let currentRouteLenth = metaList[i].length;
19 let cutLength = currentRouteLenth;//截斷偏移量 20 let oneTimeCompare = true; 21 22 //規整化:確定*的位置,不比較*及以後的內容 23 for (let j = 0; j < currentRouteLenth; j++) { 24 if (metaList[i][j] == "*") { 25 cutLength = i; 26 break; 27 }
28 } 29 30 //如果現在正在識別的路由沒有*,meta個數和待匹配的路由meta不一致,則直接判定不匹配 31 if(cutLength==currentRouteLenth){ 32 if(pathMeta.length!=currentRouteLenth){ 33 continue; 34 } 35 } 36 37 //ruleRoute表中的元素依次比對 38 for (let j = 0; j < cutLength; j++) { 39 let firstMetaChar = metaList[i][j][0]; 40 if (firstMetaChar != ":") { 41 if (pathMeta[j] != metaList[i][j]) { 42 oneTimeCompare = false; 43 break; 44 } 45 } else { 46 continue; 47 } 48 } 49 50 //如果匹配到一個OK的路由,則表示應該符合rule對應規則,退出大迴圈 51 if (oneTimeCompare == true) { 52 flag = true; 53 break; 54 } 55 } 56 57 return flag; 58 }

上述的函式接受兩個引數ruleRoute,path。其中,ruleRoute是需要進行遍歷判定的路由表,如判定成功,則表示具有rule對應的許可權。path是直接被進行判定的路由

例如定義規則hide路由表(名稱為hide的一個字串陣列):

consthide=[ '/new-ticket/:id', 'new-ticket/:id' ] 若路由符合hide內任意一個元素規則,則表示該路由被觸發後應該應用hide對應的規則。 上述匹配函式支援的路由表內元素寫法: /new-ticket/helx/fuck 常規路由 /heihei/mother/:id 帶路由引數的路由 /shit/* *代表任意長度、內容 /shit/:id/* 既帶路由引數,又帶*指代某個位置後的任意內容