小程序的登录与静默续期

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

每一个有数据交互的小程序，都会涉及到登录、token 等问题，openid 又是什么呢？怎么使用静默续期，来提升用户体验呢？

小程序登录

登录时序

一切的一切，都要从这么一张小程序登录时序图说起：

通常情况下，我们的小程序都会有业务身份，如何将微信帐号和业务身份关联起来呢？这个时候我们需要上图的步骤：

小程序调用wx.login()获取临时登录凭证code。
小程序将code传到开发者服务器。
开发者服务器以code换取用户唯一标识openid和会话密钥session_key。
开发者服务器可绑定微信用户身份id和业务用户身份。
开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

加锁的登录

在某些情况下，我们或许多个地方会同时触发登录逻辑（如多个接口同时拉取，发现登录态过期的情况）。一般来说，我们会简单地给请求加个锁来解决：

使用isLogining来标志是否请求中。
方法返回 Promise，登录态过期时静默续期后重新发起。
使用sessionId来记录业务侧的登录态。

// session 参数 key（后台吐回）
        export const SESSION_KEY = 'sessionId';
        let isLogining = false;
        export function doLogin() {
            return new Promise((resolve, reject) => {
                const session = wx.getStorageSync(SESSION_KEY);
                if (session) {
// 缓存中有 session
                    resolve();
                } else if (isLogining) {
// 正在登录中，请求轮询稍后，避免重复调用登录接口
                    setTimeout(() => {
                        doLogin()
                            .then(res => {
                                resolve(res);
                            })
                            .catch(err => {
                                reject(err);
                            });
                    }, 500);
                } else {
                    isLogining = true;
                    wx.login({
                        success: (res) => {
                            if (res.code) {
                                const reqData: ILoginRequest = {
                                    code: res.code
                                }
                                wx.request({
                                    url: API.login,
                                    data: reqData,
// method: "POST",
                                    success: (resp) => {
                                        const data = resp.data;
                                        isLogining = false;
// 保存登录态
                                        if (data.return_code === 0) {
                                            wx.setStorageSync(SESSION_KEY, data[SESSION_KEY]);
                                            resolve();
                                        } else {
                                            reject(data.return_msg);
                                        }
                                    },
                                    fail: err => {
// 登录失败，解除锁，防止死锁
                                        isLogining = false;
                                        reject(err);
                                    }
                                });
                            } else {
// 登录失败，解除锁，防止死锁
                                isLogining = false;
                                reject();
                            }
                        },
                        fail: (err) => {
// 登录失败，解除锁，防止死锁
                            isLogining = false;
                            reject(err);
                        }
                    });
                }
            });
        }

登录态静默续期的实现

checkSession

前面也提到，微信不会把session_key的有效期告知开发者，因此需要使用接口wx.checkSession()来校验session_key是否有效。

这里我们：

使用isCheckingSession来标志是否查询中。
返回 Promise。
使用isSessionFresh来标志session_key是否有效。

import {doLogin} from "./doLogin";
        import {SESSION_KEY} from "./doLogin";
        let isCheckingSession = false;
        let isSessionFresh = false;
        export function checkSession(): Promise<string> {
            return new Promise((resolve, reject) => {
                const session = wx.getStorageSync(SESSION_KEY);
                if (isCheckingSession) {
                    setTimeout(() => {
                        checkSession().then(res => {
                            resolve(res);
                        }).catch(err => {
                            reject(err);
                        });
                    }, 500);
                } else if (!isSessionFresh && session) {
                    isCheckingSession = true;
                    wx.checkSession({
                        success: () => {
                            // session_key 未过期，并且在本生命周期一直有效
                            isSessionFresh = true;
                            resolve();
                        }, fail: () => {
                            // session_key 已经失效，需要重新执行登录流程
                            wx.removeStorage({
                                key: "skey", complete: () => {
                                    doLogin().then(() => {
                                        resolve();
                                    }).catch(err => {
                                        reject(err);
                                    });
                                }
                            });
                        }, complete: () => {
                            isCheckingSession = false;
                        }
                    });
                } else {
                    doLogin().then(res => {
                        resolve(res);
                    }).catch(err => {
                        reject(err);
                    });
                }
            });
        }
        }
        }

静默续期的接口请求

至此，我们可以封装一个简单的接口，来在每次登录态过期的时候自动续期：

在请求前，使用checkSession()检车本次周期内session_key是否有效，无效则doLogin()拉起登录获取sessionId。
请求接口，若返回特定登录态失效错误码（此处假设为LOGIN_FAIL_CODE），则doLogin()拉起登录获取sessionId。
使用tryLoginCount来标志重试次数，TRY_LOGIN_LIMIT来标志重试次数上限，避免进入死循环。

import {doLogin} from "./doLogin";
        import {SESSION_KEY} from "./doLogin";
        import {checkSession} from "./checkSession";
        // 会话过期错误码，需要重新登录
        export const LOGIN_FAIL_CODES = [10000];
        const TRY_LOGIN_LIMIT = 3;
        export function request(obj: any = {}): Promise<object> {
            return new Promise((resolve, reject) => {
                checkSession().then(() => {
                    let session = wx.getStorageSync(SESSION_KEY);
                    const {url, data, method, header, dataType} = obj;
                    let tryLoginCount = obj.tryLoginCount || 0;
                    // 如果需要通过 data 把登录态 sessionId 带上const 
                    dataWithSession = {...data, [SESSION_KEY]: session, appid: APPID};
                    wx.request({
                        url, data: dataWithSession, method, header, dataType, success: (res: any) => {
                            if (res.statusCode === 200) {
                                const data: ICommonResponse = res.data;
                                // 登陆态失效特定错误码判断，且重试次数未达到上限
                                if (LOGIN_FAIL_CODES.indexOf(data.return_code) > -1 && tryLoginCount < TRY_LOGIN_LIMIT) {
                                    doLogin().then(() => {
                                        obj.tryLoginCount = ++tryLoginCount;
                                        request(obj).then(res => {
                                            resolve(res);
                                        }).catch(err => {
                                            reject(err);
                                        });
                                    });
                                } else {
                                    resolve(res);
                                }
                            } else {
                                reject(res);
                            }
                        }, fail: function (err) {
                            reject(err);
                        }
                    });
                }).catch(err => {
                    reject(err);
                });
            });
        }

至此，我们大概包装了一个能自动登录或是进行静默续期的一个请求接口。