Uni-App实现跳转拦截功能

平时我们做的Uni应用都是直接让用户先登录,再展示,年前给弄的一个商城,新要求是未登录前可以查看商城列表及分类和详细,购物车、用户中心之类的需要登录。
既然需求合理,就简单研究了一下
实现也很简单
先来个"permission.js"

// 页面白名单
const whiteList = [
    '/',
    '/pages/index/start',
    '/pages/user/login',
    '/pages/user/reg',
    '/pages/user/code',
    '/pages/mall/index',
    '/pages/mall/spot',
    '/pages/mall/info'
]

function hasPermission (url) {
    url = url.split('?');
    let access_token = uni.getStorageSync('uniIdToken')
    // 在白名单中或有token,直接跳转
    if(whiteList.indexOf(url[0]) !== -1 || access_token) {
        return true
    }
    return false
}

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

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

然后在main.js中引入这个js文件 import 'permission' 就好了

需要注意的一点就是,在应用中链接、跳转的时候,路径用绝对路径也就是/pages/..../.... 不要用 ../....这类的相对路径,不然hasPermission方法中就需要改一改了

相关文档可阅读https://uniapp.dcloud.io/api/interceptor官方文档

添加拦截器

uni.addInterceptor(STRING, OBJECT)

STRING 参数说明

需要拦截的api名称,如:uni.addInterceptor('request', OBJECT) ,将拦截 uni.request()

注意:仅支持异步接口,如:uni.setStorage(OBJECT),暂不支持同步接口如:uni.setStorageSync(KEY,DATA)

删除拦截器

uni.removeInterceptor(STRING)
STRING 参数说明
需要删除拦截器的api名称