Vue路由守卫优化: 我把老王的门锁换了

Vue路由守卫优化: 我把老王的门锁换了

正所谓一杯茶、一根烟、一段代码写一天,这天我正在工位上喝着我的蜂蜜柚子猫茶,就听到我隔壁工位上的老王隔一段时间,就发出 "唉" 的叹气声,几次循环之后,我就再也忍不住踱步过去看看头发都快要被薅秃的老王到底遇到了啥问题。

1. 过于臃肿的路由守卫

定睛一看,原来问题出在路由守卫这里

js 复制代码
router.beforeEach(async (to, from, next) => {
    if ((to.path == '页面A' || to.path == '页面B') && 用户是否登录) {
        next('登录页面')
    } 
    if ((to.path == '页面A' || to.path == '页面B') && 用户是否认证) {
        showDialog({
            confirm: () => {
                next('认证页面')
            }
        })
    }
    if ((to.path == '页面A' || to.path == '页面B') && 用户是否具有邮箱) {
        next('邮箱页面')
    }
});

可以看到该代码,很多判断都和页面绑定到了一起,导致每次有新页面需要拦截的话,都需要在这厚重的判断上再增加上新的代码,导致这块代码会越来越复杂,直到无法维护。

2. 优化路由守卫

那么该如何优化呢,我考虑从两个方面入手:

第一个: 将页面是否登录、认证之类的信息,放到路由本身的元信息中去,由路由本身来判断自己是否需要拦截,而不是写死在路由守卫中,而且这样做的好处是对于都需要拦截的子路由来说,只需要在父路由上携带是否需要拦截即可

第二个: 将所有拦截器统一到外部数组中,让拦截器和路由守卫本身分离,使得编写拦截器时不会再对路由守卫本身造成意料之外的影响,同时也不会让路由守卫这个方法本身变得过于复杂。

接下来直接上改造后的代码吧

js 复制代码
// 定义路由
const router = [
    {  
        path: '/xxx',  
        name: 'xxx',  
        component: () => import('xxx.vue'),
        meta: {
            // 是否需要登录
            requireLogin: true,
            // 是否需要邮箱
            requireEmail: true
        }
    },
    {  
        path: '/xxx',  
        name: 'xxx',  
        component: () => import('xxx.vue'),
        meta: {
            // 是否需要登录
            requireLogin: true,
            // 是否需要邮箱
            requireEmail: true
        },
        // 这样子路由也同样拦截了
        children: [
            {
                path: '/xxx',  
                name: 'xxx',  
                component: () => import('xxx.vue')
            }
        ]
    }
]

// 定义统一拦截器
const FILTER_LIST = [  
    {  
        name: '登录过滤器',  
        func: async (to, from) => { 
            if (!to.meta.requireLogin) {  
                return null;  
            }
            if (用户是否登录) {
                return '登录页面'
            }
        }  
    },
    {  
        name: '邮箱过滤器',  
        func: async (to, from) => { 
            if (!to.meta.requireEmail) {  
                return null;  
            }
            if (用户是否具有邮箱) {
                return '邮箱页面'
            }
        }  
    }
]

// 路由守卫
router.beforeEach(async (to, from, next) => {  
    let breakFilterResult = null;
    console.groupCollapsed('路由FILTER')
    console.log('------------------------ FILTER START ------------------------')
    // 循环拦截器,判断拦截器是否通过
    for (const filterItem of FILTER_LIST) {  
        const result = await filterItem.func(to, from);  
        if (result != null) {  
            breakFilterResult = result;  
            console.log('- ' + filterItem.name + '%c [不通过]', 'color:#f00;');
            // 如果拦截器没有通过,使用break跳出循环
            break;
        } else {  
            console.log('- ' + filterItem.name + '%c [通过]', 'color:#0f0;');  
        }  
    }
    console.log('------------------------ FILTER END ------------------------')
    console.groupEnd();  
    if (breakFilterResult != null) {  
        next(breakFilterResult);  
    } else {  
        next();  
    }  
});

3. 结语

很多时候简单就是复杂,复杂有时候却意味着简单,通过抽象和分离,看似代码变得更加复杂了,但是维护起来却其实变得更加简单了。当然代码编写有时候就是取舍之道,你不一定要做的多正确,很多时候你的优化和重构并不一定能让代码变得更好,但是一定要前进在让代码变好的路上。

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫4 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css