uni.addInterceptor for uniapp global interception

This is very speechless. . . . I tried several times and found that the first entry page is not blocked, and I am going to make a uniapp to judge the authorization situation, but this will only be triggered after the first time (because I am sharing the H5 page of the WeChat official account, I will need to first enter the interception, if there is no requirement for the first login interception, you can see the bottom code). . There are two cases

  1. In the onload of the page that needs to be shared, it is judged whether there is a 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. In onLaunch in app.vue the following code. Directly enter the page to judge whether there is a token or not, and then force jump to the home page (my WeChat authorization is obtained on the home page without a login page). The jump needs to distinguish whether it is a tabbar page

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

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

                    }
                })
}

In fact, there are several more. For example, vuex, or encapsulate the login code fragments and mix them in main.js. Haven't tried either of these, though. In fact, these two are not as convenient as routing interception. . . But this uniapp interceptor is very tasteless, and can't use vue's router.beforeEach......

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

In fact, if there is no requirement for the first login interception. It can be written in onLaunch of App.vue ,

(I also used other people's code infringement to contact me to delete)

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);
                    },
                })
})

You can also create a new router/index.js file to write. Introduced in main.js

Guess you like

Origin blog.csdn.net/keaicll/article/details/129670953