Uni-App如何实现跳转拦截功能(完整demo)

uni-app如何像vue-router中的beforeEach一样实现跳转拦截功能呢？

先看效果图：

在这里因为项目运行默认先进登陆页所以我们在地址栏改下地址进首页。

我们发现底部有四个菜单分别是：首页、分类、购物车、我的；按常理来说首页和分类是不需要登陆就能查看的。另外两个则需要先登陆

接下来我们说一说实现的过程

首先我们要定义一个页面白名单，在跳转时先判断是否在白名单中，在的话直接跳转，不在则判断登陆状态

// 页面白名单
const whiteList = [
    '/',
    '/pages/login/index',
    '/pages/index/index',
    '/pages/category/index',
]

function hasPermission (url) {
    // 在白名单中或有token，直接跳转
    if(whiteList.indexOf(url) !== -1 || store.getters.access_token) {
        return true
    }
    return false
}

uni.addInterceptor('navigateTo', {
    // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/login/index'
            })
            return false
        }
        return true
    },
    success (e) {
        // console.log(e)
    }
})

uni.addInterceptor('switchTab', {
    // tabbar页面跳转前进行拦截
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/login/index'
            })
            return false
        }
        return true
    },
    success (e) {
        // console.log(e)
    }
})

在代码中我们通过uni.addInterceptor拦截用户跳转行为，关于该api的介绍可以在文档中找到

通过该拦截器，拦截navigateTo和switchTab，在拦截器的invoke生命周期判断用户的登陆状态和页面白名单，invoke根据返回的布尔值来决定是否执行跳转，打印一下invoke的参数

 

可以看到被拦截的接口的详细信息；

这里有一个需要注意的地方，如果用户不满足条件跳转到登录页时记得不要用被拦截的api进行跳转，那样的话会陷入死循环。

通过这种方式有一个很大的优势那就是在页面跳转前判断登陆状态，不满住条件直接跳登陆页，而无需先跳页面在跳登录页用户体验度有很大的提升。

如果有什么疑问可以评论留言给我，看到后我会第一时间回复。

 

注意：最新发现switchTab跳转拦截只在H5端有效，各大小程序平台均无效，app端还没试

 

文章详情：https://huolihua.cn/#/article-detail/1773fvv9ady80000

附上完整实现代码：https://gitee.com/huolihua/uni-app-interceptor.git