uniapp全局拦截之uni.addInterceptor

这个就很让人无语。。。。试了几次发现首次进入页面不拦截,准备做一个uniapp一进来判断授权的情况,但是这个只有第一次之后才会触发(因为我做的是微信公众号的H5页面的分享出去所以会需要首次进入拦截,如果对于首次登录拦截没有要求的可见最下边代码)。。分了两种情况

  1. 在需要分享出去的页面onload中做了是否有token的判断

onLoad(e) {
            console.log(333)
            console.log(e, 'eeeeeeejinxing')
            console.log(e.myid, 'e.myid')
            console.log(e.activityId, 'e.activityId')
            console.log(e.id)
            if (e.myid || e.activityId) {
                this.shareId = e.myid;
                let token = localStorage.getItem('token');
                console.log("1111");
                console.log(token);
                if (token) {
                    console.log('token')
                    this.user(e.activityId)
                } else {
                    console.log('notoken')
                    this.getWechatCode(e.activityId);
                }
                console.log('1.111')
                // this.being(e.activityId)        
                return
            } else {
                console.log('2222')
                // this.uid = JSON.parse(localStorage.getItem('userInfo')).id
                // console.log(this.uid, 'uididddd')
                this.being(e.id)
                this.activityId = e.id;
            }
            // this.share()
            //uid分享出去的人的id id是活动id 
},
  1. 在app.vue中的onLaunch中以下代码。直接一进页面判断有没有token 没有就强制跳转到首页(我的获取微信授权的在首页获取 没有做登录页)跳转需要区分是否是tabbar页面

let token = uni.getStorageSync('token')
            if (token) {

            } else {
                uni.reLaunch({
                    url: "/pages/tab/index",
                    success: () => {

                    }
                })
}

其实还有好几种 。比如vuex ,或者把登录的代码片段封装起来 在main.js中mixin混入。不过这两种都还没试。其实这两种还是不如路由拦截来的方便。。。但是这个uniapp的拦截器很鸡肋,而且用不了vue的router.beforeEach......

===================================

其实如果对首次登录拦截没有要求的话。可在App.vue的onLaunch中写,

(也是用的别人代码 侵权联系我 删)

let needLogin = [
                "/pages/tab/index",
]
            let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
            list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
                console.log(item,'router list item')
                uni.addInterceptor(item, {
                    invoke(e) { // 调用前拦截
                        //获取用户的token
                        console.log(e,'routerjs invoke')
                        const token = localStorage.getItem('token')
                        //获取当前页面路径(即url去掉"?"和"?"后的参数)
                        console.log(token,'router index token')
                        const url = e.url.split('?')[0]
                        console.log(url,'router index url')

                        console.log(needLogin.includes(url))
                        //判断要打开的页面是否需要验证登录
                        if (needLogin.includes(url) && token == '') {
                            uni.showToast({
                                title: '该页面需要登录才能访问,请先登录',
                                icon: 'none'
                            })
                            uni.navigateTo({
                                url: "/pages/login/login"
                            })
                            return false
                        }


                        return true
                    },
                    fail(err) { // 失败回调拦截 
                        console.log(err);
                    },
                })
})

也可以新建个router/index.js文件写。在main.js中引入

### 使用 `addInterceptor` 进行路由异步拦截 在 UniApp 中,可以利用 `uni.addInterceptor` 方法来实现对请求的拦截,并在此过程中处理一些必要的逻辑,比如身份验证、权限校验等。此方法允许开发者自定义拦截器,在API调用前或回调执行前后插入特定的操作。 对于希望实现带有异步操作的路由拦截场景,可以通过设置全局导航守卫的方式达成目的。下面是一个简单的例子展示如何通过 `addInterceptor` 来添加一个用于处理登录状态检查的拦截器: ```javascript // 在 app.vue 的 created 钩子函数内或其他合适位置注册拦截器 export default { onLaunch() { // 添加 API 请求拦截器 uni.addInterceptor('request', { invoke(args) { console.log('Before request:', args); }, success(result) { console.log('Request succeeded with result:', result); }, fail(error) { console.error('Request failed due to error:', error); } }); // 对于页面跳转类型的拦截(如 navigateTo) uni.addInterceptor({ invoke(apiName, args){ if (apiName === 'navigateTo' || apiName === 'redirectTo') { const url = args[0].url; // 假设这里有一个异步的身份验证过程 checkLoginStatus().then(isLoggedIn => { if (!isLoggedIn) { // 如果未登录,则重定向至登录界面 uni.redirectTo({url:'/pages/login/index'}); } else { // 继续原来的页面跳转动作 originalNavigate(url); } }); return false; // 返回false阻止默认行为的发生 } } }); function checkLoginStatus(){ // 模拟异步获取登录状态的过程 return new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve(true); // 此处应替换为实际判断逻辑 },1000); }) } function originalNavigate(url){ uni.navigateTo({url}); } } } ``` 上述代码展示了如何使用 `uni.addInterceptor` 注册两个不同类型的拦截器:一个是针对所有网络请求(`request`)的一般性拦截;另一个则是专门用来处理页面间跳转事件(navigateTo/ redirectTo),其中包含了模拟的异步认证流程[^1]。 值得注意的是,当涉及到页面间的转换时,由于这些操作本质上是非同步的,因此可能需要特别小心地管理好它们之间的顺序以及可能出现的竞争条件等问题。此外,考虑到用户体验,应当尽可能减少不必要的延迟,并提供清晰的状态反馈给用户。 #### 处理页面栈变化 每当应用程序中的路由发生变化时,UniApp 应用程序内部维护着一个表示当前显示页面列表的数据结构——即所谓的“页面栈”。随着用户的交互活动,这个栈会相应地增长或缩小,具体取决于所采取的动作是前进还是回退[^2]。 为了更好地控制这种动态变化带来的影响,建议开发人员熟悉各种可用的方法及其触发机制,从而能够更加灵活地响应不同的应用场景需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值