uniapp路由拦截

前言

我们小程序是采用uni-app开发的，uni-app是vue风格的所以开发起来效率很高，但是有个缺陷就是没有路由钩子，就这一点还蛮不方便的。一般来讲，路由钩子的一个最常见的应用场景就是权限校验，恰好我们项目中就有很多需要校验权限的页面，所以在开发中也遇到了这个难题。

原方案

先简单说一下权限校验的方案，其实都很简单，某些页面是需要用户登录了之后才能进入的，即有token才能进入，否则就得先登录才能进入。

所以在这之前，我们的做法就是在每次跳转需要权限的页面的时候先去判断一下有无token，有的话就进入，无的话就去登录页

// 改造前
bindTap: function(e) {
    if(!token) { // 无token表示为登录，先去登录页
       uni.navigateTo({
          url: 'login'
      })
        return
    }
    uni.navigateTo({
        url: 'detail?id=123'
    })
}
​

这样做也没什么问题，就是太麻烦了，每个需要权限的页面都得先判断一下，页面多了的话那真的不敢想，而且也不好维护。这里大家是不是觉得如果有路由钩子的话，那是不是就非常方便了，在钩子里面判断就好了。

实现

既然没有uniapp没有路由钩子，那我们自己给他扩展一下不就行了

const methodToPatch = ['navigateTo', 'redirectTo', 'switchTab', 'navigateBack']
methodToPatch.map(item => {
    const original = uni[item] // 
    uni[item] = function(opt = {}, needAuth) {
         if (needAuth && !store.getters.token) { // 需要登录且未登录
            uni.navigateTo({
                url: '/login'
            })  
         } else {
             return original.call(this, opt)
         }
    }
})

是不是非常的简单，加上这段扩展之后，以后用起来就方便了

// 改造后
bindTap: function(e) {
    uni.navigateTo({
        url: 'detail?id=123'
    }, true)
}
​

(ps: 其实这个扩展的思路是刚好不久前在看vue的源码，看到它对数组的处理，然后就借鉴了一下它的扩展思路，后来查了一下资料发现其实这就是装饰者模式)

还是要多学习学习优秀的代码，说不准哪天就能借鉴上了，哈哈哈

vue扩展数组的源码点这

完事~