uniapp路由拦截_uniapp 路由拦截

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

如果你需要这些资料，可以戳这里获取

前言

我们小程序是采用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({


![img](https://img-blog.csdnimg.cn/img_convert/7d421f3a05a76b709662ac01979328a5.png)
![img](https://img-blog.csdnimg.cn/img_convert/ac0796f0f4e8634e4676645577707c35.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**