uniapp怎样才能在页面onLoad初始化前通过App.vue的onLauch获取token

分类：uni-app

uniapp

我现在想在APP.vue里的onLaunch请求后台token，在没有获取到token前，首页的onLoad方法就已经初始化并没有携带token请求后台了，导致无token报错。试了很多方式比如Promise也不行，报错this.$onLaunch没有定义

1、main.js添加如下代码  
Vue.prototype.$onLaunched = new Promise(resolve => {Vue.prototype.$isResolve = resolve  
})  
2、在 App.vue 的 onLaunch 中增加代码 this.$isResolve()  
这个方法必须在你的业务执行完毕后再执行，如小程序默认登录。  

app.js文件  

onLaunch: function() {console.log('App Launch')this.defaultLogin();  
},  
methods: {// 小程序端默认登录defaultLogin() {var _this = this;uni.login({success: function(loginRes) {console.log(loginRes);_this.$u.post('/user/Wxloginc/mloginc', {code: loginRes.code,}).then(res => {console.log('==小程序默认登录==');console.log(res);// 缓存tokenuni.setStorageSync('token', res.data.token);_this.$isResolve();}).catch(res => {console.log(res);})}});},  
}  
3、在页面 onLoad中增加代码 await this.$onLaunched  
注意onload要添加async，否则编译不过去。  

async onLoad(option) {//等待登录成功  await this.$onLaunched;// 后续业务逻辑  
},

2023-08-09 12:20 负责人:无分享

3 个回复

爱豆豆 - 办法总比困难多

因为你是不同的页面并且请求都是异步的所以加载的顺序并不是固定的
你可以将app.vue中获取用户信息的接口（登录接口）的处理和方法做成公用函数
然后封装为登录方法并添加回调callback 拿到token后使用callback回调吧用户信息或者token返回出去
在使用的地方调用封装好的登录方法传入回调接收返回的token/用户信息然后做你的页面处理

//登录js  
export const login = (callback) => {  
    let token = uni.getStorageSync('token')  
    if(token) return callback(token)  
    uni.login({  
        provider: 'weixin',  
        success: (data) => {  
            你的登录接口(data).then((res) => {  
                uni.setStorageSync('token',res.token || '')  
                callback(res.token)  
            })  
        }  
    })  
}

// 页面  
import {login} from '@/xxxxx.js'  
// 使用  
login((token) => {  
console.log(token)  
})

Zingsun (作者)

明白啦，感谢哈，感谢

2023-08-09 14:42
爱豆豆

回复 Zingsun: onLoad(() => {

login((token) => {

// 接口调用获取页面需要的数据

xxx().then((res) => {

})

})

})

2023-08-09 14:46
爱豆豆

回复 Zingsun: 麻烦点个赞谢谢如果还没明白可以加我qq帮你改造一下 2087592068

2023-08-09 14:46
8***@qq.com

但是这样要调用的地方就好多

2024-01-26 16:44