【VUE】实现一个常见的路由拦截表

我们经常需要根据路由表划定权限，在前端开发中，可以通过划定某种具体权限的路由表，来决定一些指定的路由是否应该应用某些操作

function checkRouteByRule(ruleRoute,path) {
    let flag = false;

    let metaList = ruleRoute.map(item => {
        let perRouterMetaList = item.split("/").filter(function (s) {
            //去除数组内元素为空的元素
            return s && s.trim();
        })
        return perRouterMetaList
    })

    let pathMeta = path.split("/").filter(function (s) {
        //去除数组内元素为空的元素
        return s && s.trim();
    })

    for (let i = 0; i < metaList.length; i++) {
        let currentRouteLenth = metaList[i].length;
        let cutLength = currentRouteLenth;//截断偏移量
        let oneTimeCompare = true;

        //规整化：确定*的位置，不比较*及以后的内容
        for (let j = 0; j < currentRouteLenth; j++) {
            if (metaList[i][j] == "*") {
                cutLength = i;
                break;
            }
        }

        //如果现在正在识别的路由没有*，meta个数和待匹配的路由meta不一致，则直接判定不匹配
        if(cutLength==currentRouteLenth){
            if(pathMeta.length!=currentRouteLenth){
                continue;
            }
        }

        //ruleRoute表中的元素依次比对
        for (let j = 0; j < cutLength; j++) {
            let firstMetaChar = metaList[i][j][0];
            if (firstMetaChar != ":") {
                if (pathMeta[j] != metaList[i][j]) {
                    oneTimeCompare = false;
                    break;
                }
            } else {
                continue;
            }
        }

        //如果匹配到一个OK的路由，则表示应该符合rule对应规则，退出大循环
        if (oneTimeCompare == true) {
            flag = true;
            break;
        }
    }

    return flag;
}

上述的函数接受两个参数  ruleRoute,path。其中，ruleRoute是需要进行遍历判定的路由表，如判定成功，则表示具有rule对应的权限。path是直接被进行判定的路由

例如定义规则hide路由表（名称为hide的一个字符串数组）：

const hide = [

    '/new-ticket/:id',

    'new-ticket/:id'

]

 

若路由符合hide内任意一个元素规则，则表示该路由被触发后应该应用hide对应的规则。

上述匹配函数支持的路由表内元素写法：

/new-ticket/helx/fuck  常规路由

/heihei/mother/:id  带路由参数的路由

/shit/*      *代表任意长度、内容

/shit/:id/*  既带路由参数，又带*指代某个位置后的任意内容