美文网首页程序员前端开发那些事儿让前端飞
uni-app小程序页面都需要确保登陆后,再用cookie进行数

uni-app小程序页面都需要确保登陆后,再用cookie进行数

作者: 嘻哈章鱼小丸子 | 来源:发表于2021-08-10 15:02 被阅读0次

    需要确保登陆后在进行数据请求,这不就是静默登录么?

    只有首次注册登录的用户需要提供用户信息,其他时候都是静默登录。

    什么叫静默登录?

    如何实现小程序静默登录?一个很详细的设计方案,值得收藏!

    这篇文章值得参考。其中第四点,静默登录的调用时机:小程序启动时调用和接口请求发起时调用。由于微信小程序onlaunch 不是每次都启动的(5min 内属于热启动好像),所以考虑第二种方案:只在接口请求发起时调用。

    但是必须要先解决下面的问题:
    • 如果想在接口请求发起时调用,那就得把登录流程单独拿出来或者放到请求页面一起。
    • 如果想在登录完成后还能重新发起之前失败的请求,得有callback/异步函数。
    • 如果登录失败了还要继续登录么?
    查了会资料,思考了一会,准备这样解决:
    • 现在的请求已经是单独封装的了,登录没其他地方用到,放请求里一起封装
    • 异步函数用promise,成功失败都可以有回调,而且不会乱套,按顺序执行
    • 登陆失败给个提示,简单点。当然也可以限制登录失败的次数,超过X次就提示:登录失败,服务器问题。

    于是,着手改造,最终是下面这样:

    const baseUrl = ''; 
    import API from './api'
    
    const wxLogin = (name, data, resolve) => {
        let self = this;
        uni.login({
            provider: 'weixin',
            success: function(loginRes) {
                if (loginRes.errMsg === 'login:ok') {
                    request('wxlogin', {
                        code: loginRes.code
                    }).then(res => {
                        if (res) {
                            //todo.....
                            resolve(request(name, data));
                           
                        } else {
                            uni.showModal({
                                content: res.msg,
                                showCancel: false
                            });
                        }
    
                    });
                } else {
                    uni.showModal({
                        content: '登陆失败',
                        showCancel: false
                    });
                }
            }
        });
    };
    
    const request = (name = '', data = {}) => {
        if (!name) {
            uni.showToast({
                title: '暂无该请求',
                duration: 2000
            });
            return;
        }
        let {
            url = '', method = 'GET'
        } = API[name];
        let header = {};
        const sessionID = uni.getStorageSync('sessionID');
        if (sessionID) {
            header['cookie'] = sessionID;
        }
        return new Promise((resolve, reject) => {
            uni.request({
                method,
                url: baseUrl + url,
                data: data,
                header: header,
                dataType: 'json',
            }).then((response) => {
                let [error, res] = response;
                if (error) {
                    uni.showToast({
                        icon: 'none',
                        title: error.errMsg,
                        duration: 2000
                    });
                    reject(error)
                } else if (res.statusCode === 403) {
                        wxLogin(name, data, resolve)
                } else {
                    if (url.indexOf('wxlogin') !== -1 && res.cookies && res.cookies[0]) {
                        const id = res.cookies[0].split(';')[0];
                        uni.setStorageSync('sessionID', id);
                    }
                    resolve(res.data);
                }
            }).catch(error => {
                let [err, res] = error;
                uni.showToast({
                    title: '请求失败',
                    duration: 2000
                });
            })
        })
    }
    export default request
    

    运行试下,静默登录已经实现,回调也没有问题,有问题的是页面存在多个请求的问题:

    首页有多个请求的时候会实现多次登录

    感觉不太好,于是就把多个请求提出一个初始请求出来,其他请求放在这个初始请求之后,就可以了。

    参考资料

    我们小程序页面都需要确保登陆后,再用token进行数据请求,如何做到?

    相关文章

      网友评论

        本文标题:uni-app小程序页面都需要确保登陆后,再用cookie进行数

        本文链接:https://www.haomeiwen.com/subject/ipromltx.html