且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

uniapp登录拦截器

更新时间:2022-10-01 09:33:41

 uni.addInterceptor是uni-app官网提供的拦截器,可以利用它来实现登录拦截器,用户在没有登录时是无法进行其他操作的。


uni.addInterceptor(STRING, OBJECT)

https://uniapp.dcloud.io/api/interceptor?id=addinterceptor

uniapp登录拦截器

在根目录下新建一个index.js,或者新建一个文件夹,在文件夹中新建index.js。


uniapp登录拦截器


//只要是未登录状态,想要跳转到名单内的路径时,直接跳到登录页。
// 页面白名单,不受拦截
const whiteList = [
    '/pages/my/my'
]
function hasPermission (url) {
    let islogin = sessionStorage.getItem("isLogin");
    islogin = Boolean(Number(islogin));//返回布尔值
    // 在白名单中或有登录判断条件可以直接跳转
    if(whiteList.indexOf(url) !== -1 || islogin) {
        return true
    }
    return false
}
uni.addInterceptor('navigateTo', {
    // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/my/my'
            })
            return false
        }
        return true
    },
    success (e) {
    }
})
uni.addInterceptor('switchTab', {
    // tabbar页面跳转前进行拦截
    invoke (e) {
        if(!hasPermission(e.url)){
            uni.reLaunch({
                url: '/pages/my/my'
            })
            return false
        }
        return true
    },
    success (e) {
    }
})

在main.js中引用。

import './router/index';//引入拦截

登录界面利用sessionStorage存储登录判断条件。

   sessionStorage.setItem('isLogin',1);//登录判断

这样就实现了登录拦截器。