乐趣区

vuerouter-导航守卫中-next-控制实现

jiezi

使用 vue-router 的导航守卫钩子函数，某些钩子函数可以让开发者根据业务逻辑，控制是否进行下一步，或者进入到指定的路由。

例如，后台管理页面，会在进入路由前，进行必要登录、权限判断，来决定去往哪个路由，以下是伪代码：

// 全局导航守卫
router.beforEach((to, from, next) => {if('no login'){next('/login')
  }else if('admin') {next('/admin')
  }else {next()
  }
})

// 路由配置钩子函数
{
  path: '',
  component: component,
  beforeEnter: (to, from, next) => {next()
  }
}

// 组件中配置钩子函数
{
  template: '',
  beforeRouteEnter(to, from, next) {next()
  }
}

调用 next, 意味着继续进行下面的流程；不调用，则直接终止，导致路由中设置的组件无法渲染，会出现页面一片空白的现象。

钩子函数有不同的作用，例如 beforEach，afterEach，beforeEnter，beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave，针对这些注册的钩子函数，要依次进行执行，并且在必要环节有控制权决定是否继续进入到下一个钩子函数中。

以下分析下源码中实现的方式，而源码中处理的边界情况比较多，需要抓住核心点，去掉冗余代码，精简出便于理解的实现。

精简源码核心功能

总结下核心点：钩子函数注册的回调函数，能顺序执行，同时会将控制权交给开发者。

先来一个能够注册回调函数的类：

class VueRouter {constructor(){this.beforeHooks = []
    this.beforeEnterHooks = []

    this.afterHooks = []}

  beforEach(callback){return registerHook(this.beforeHooks, callback)
  }
  beforeEnter(callback){return registerHook(this.beforeEnterHooks, callback)
  }
  afterEach(callback){return registerHook(this.afterHooks, callback)
  }
}
function registerHook (list, fn) {list.push(fn)
  return () => {const i = list.indexOf(fn)
    if (i > -1) list.splice(i, 1)
  }
}

声明的类，提供了 beforEach、beforeEnter 和 afterEach 来注册必要的回调函数。

抽象出一个 registerHook 公共方法，作用：

  1. 注册回调函数
  2. 返回的函数，可以取消注册的回调函数

使用一下：

const router = new VueRouter()

const beforEach = router.beforEach((to, from, next) => {console.log('beforEach');
  next()})
// 取消注册的函数
beforEach()

以上的回调函数会被取消，意味着不会执行了。


router.beforEach((to, from, next) => {console.log('beforEach');
  next()})

router.beforeEnter((to, from, next) => {console.log('beforeEnter');
  next()})

router.afterEach(() => {console.log('afterEach');
})

以上注册的钩子函数会依次执行。beforEach 和 beforeEnter 的回调接收内部传来的参数，同时通过调用 next 可继续走下面的回调函数，如果不调用，则直接被终止了。
最后一个 afterEach 在上面的回调函数都执行后，才被执行，且不接收任何参数。

先来实现依次执行，这是最简单的方式，在类中增加 run 方法，手动调用：


class VueRouter {
  // ... 其他省略，增加 run 函数

  run(){
    // 把需要依次执行的回调存放在一个队列中
    let queue = [].concat(
      this.beforeHooks,
      this.afterHooks 
    )
    
    for(let i = 0; i < queue.length; i++){if(queue(i)) {queue(i)('to', 'from', () => {})
      }
    }
  }
}

// 手动调用 

router.run()

打印：

‘beforEach’
‘beforeEnter’

上面把要依次执行的回调函数聚合在一个队列中执行，并传入必要的参数，但这样开发者不能控制是否进行下一步，即便不执行 next 函数，依然会依次执行完队列的函数。

改进一下：

class VueRouter {
  // ... 其他省略，增加 run 函数 

  run(){
    // 把需要依次执行的回调存放在一个队列中
    let queue = [].concat(
      this.beforeHooks,
      this.afterHooks 
    )
    queue[0]('to', 'from', () => {queue[1]('to', 'from', () => {console.log('调用结束');
      })
    })
  }
}

router.beforEach((to, from, next) => {console.log('beforEach');
  // next()})

router.beforeEnter((to, from, next) => {console.log('beforeEnter');
  next()})

传入的 next 函数会有调用下一个回调函数的行为，把控制权交给了开发者，调用了 next 函数会继续执行下一个回调函数；不调用 next 函数，则终止了队列的执行，所以打印结果是:

‘beforEach’

上面实现有个弊端，代码不够灵活，手动一个个调用，在真实场景中无法确定注册了多少个回调函数，所以需要继续抽象成一个功能更强的方法：

function runQueue (queue, fn, cb) {
  const step = index => {
    // 队列执行结束了
    if (index >= queue.length) {cb()
    } else {
      // 队列有值
      if (queue[index]) {
        // 传入队列中回调，做一些必要的操作，第二个参数是为了进行下一个回调函数
        fn(queue[index], () => {step(index + 1)
        })
      } else {step(index + 1)
      }
    }
  }
  // 初次调用，从第一个开始
  step(0)
}

runQueue 就是执行队列的通用方法。

  1. 第一个参数为回调函数队列，会依次取出来；
  2. 第二个参数是函数，它接受队列中的函数，进行一些其他处理；并能进行下个回调函数的执行；
  3. 第三个参数是队列执行结束后调用。

知道了这个函数的含义，来使用一下：


class VueRouter {
  // ... 其他省略，增加 run 函数 

  run(){
    // 把需要依次执行的回调存放在一个队列中
    let queue = [].concat(
      this.beforeHooks,
      this.beforeEnterHooks 
    )

    // 接收回到函数，和进行下一个的执行函数
    const iterator = (hook, next) => {
      // 传给回调函数的参数，第三个参数是函数，交给开发者调用，调用后进行下一个
      hook('to', 'from', () => {console.log('执行下一个回调时，处理一些相关信息');
        next()})
    }

    runQueue(queue, iterator, () => {console.log('执行结束');
      // 执行 afterEach 中的回调函数
      this.afterHooks.forEach((fn) => {fn()
      })
    })
  }
}
// 注册
router.beforEach((to, from, next) => {console.log('beforEach');
  next()})

router.beforeEnter((to, from, next) => {console.log('beforeEnter');
  next()})

router.afterEach(() => {console.log('afterEach');
})

router.run();

从上面代码可以看出来，每次把队列 queue 中的回调函数传给 iterator，用 hook 接收，并调用。
传给 hook 必要的参数，尤其是第三个参数，开发者在注册的回调函数中调用，来控制进行下一步。
在队列执行完毕后，依次执行 afterHooks 的回调函数，不传入任何参数。

所以打印结果为：

beforEach
执行下一个回调时，处理一些相关信息
beforeEnter
执行下一个回调时，处理一些相关信息
执行结束
afterEach

以上实现的非常巧妙，再看 Vue-router 源码这块的实现方式，相信你会豁然开朗。

以上如有偏差欢迎指正学习，谢谢。~~~~

github 博客地址:https://github.com/WYseven/blog, 欢迎 star。

如果对你有帮助，请关注【前端技能解锁】：

退出移动版