2024年最全小程序用户登录架构设计，滴滴数据面试

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

「用户登录」方案架构如上图所示，将所有登录相关功能抽象到 「service 层」（本项目将其命名为session），供 「业务层」 调用。该 「service 层」 主要分为以下两个模块：

3.1.1 libs - 提供登录相关的类方法供「业务层」调用

1. 封装session类，提供类方法供「业务层」调用。主要有以下几种方法：

| 方法名 | 功能 | 使用场景 |

| — | — | — |

| silentLogin | 发起静默登录 | - |

| login | 登录，silentLogin方法的一层封装 | 用于小程序启动时发起静默登录 |

| refreshLogin | 刷新登录态，silentLogin方法的一层封装 | 用于登录态过期时发起静默登录 |

| ensureSessionKey | 验证sessionKey是否过期，过期则刷新登录态 | 绑定微信授权手机号时验证是否过期，过期则得重新弹窗授权 |

| bindPhone | 绑定微信授权手机号 | 微信授权手机号弹窗点击「允许」触发 |

| updateUser | 绑定微信授权用户信息 | 微信授权用户信息点击「允许」触发 |

| getCurrentAuthStep | 获取当前用户登录所属阶段 | 详见下文 |

| mustAuth | 各种触发场景拦截判断是否需要登录 | 详见下文 |

当然，session类中还封装了一些方法用于与storage交互，比如获取storage中的auth-token用于各种鉴权请求携带等等。session类也提供的一些拓展方法，比如注销账号、解绑手机号等等用于后续需求迭代。

1. 装饰器：

• must-auth：mustAuth类方法的装饰器，便于业务层各种场景触发登录。

• fuse-line：熔断机制，如果短时间内多次调用，则停止响应一段时间，类似于 TCP 慢启动。用于解决refreshLogin、login等方法的并发处理问题。

• single-queue：单队列模式，同一时间，只允许一个正在过程中的网络请求。请求被锁定之后，同样的请求都会被推入队列，等待进行中的请求返回后，消费同一个结果。用于解决refreshLogin、login等方法的并发处理问题。

3.1.2 ui - 提供通用组件供业务层调用

1. 基础组件：user-container和phone-container分别是获取「微信授权用户信息」和获取「微信授权手机号」的纯 UI 单元组件，给通用组件使用。

2. behavior 类：拿到授权数据后需要发送给服务端进行存储，也需要执行一些跳转逻辑判断，这些都抽象成行为类封装在auth-flow中，供通用组件使用。

3. 通用组件：共用一个行为类，区别在于auth-flow-container用于页面，auth-flow-popup用于弹窗。如下所示，小程序只有微信授权功能，则可以通过弹窗完成授权。如小程序同时提供手机号验证码和密码登录等功能，则需跳转特定登录页面。

登录流程-弹窗

3.2 libs

---

3.2.1 用户身份定义

用户登录阶段

综上所示，用户登录的阶段可以分为以下三步：

// 用户登录的阶段

export enum AuthStepType {

// 阶段一：游客态：静默登录成功，未绑定手机号，无用户信息

ONE = 1,

// 阶段二：会员态：用户登录成功，已绑定手机号，无用户信息

TWO = 2,

// 阶段三：会员信息态：用户登录成功，已绑定手机号，有用户信息

THREE = 3,

}

那么如何判断用户此时处于哪个步骤，基于「静默登录」的启发，原本「静默登录」成功开发者后端会将自定义登录态 auth-token返回给前端，此处请求可以携带返回「用户信息」，同auth-token一起命名为session存储在本地storage。当「用户登录」或者「更新用户信息」时，会同步更新storage中key为session的数据，从而通过这些用户数据判断当前用户处于哪一个登录阶段。

以下表格列出了session存储的部分重要的属性以及在三个阶段属性对应的值。

| 属性 | 定义 | 游客态 | 会员态 | 会员信息态 |

| — | — | — | — | — |

| authToken | 自定义登录态 | ‘0d5bad172…’ | ‘0d5bad172…’ | ‘0d5bad172…’ |

| uid | 用户 id | ‘001’ | ‘001’ | ‘001’ |

| busiIdentity | 用户身份定义 | ‘VISIT’ | ‘MEMBER’ | ‘MEMBER’ |

| nickName | 用户昵称 | ‘’ | ‘u_a1bk45’ | ‘rileycai’ |

| headUrl | 头像链接 | ‘’ | ‘’ | ‘www.xx.com/image/…’ |

| phone | 手机号码 | ‘’ | ‘17600888888’ | ‘17600888888’ |

| … | 其它用户信息 | … | … | … |

注意： 会员态和会员信息态的busiIdentity值均为MEMBER，区分会员态和会员信息态可以通过用户昵称和头像等字段，比如用户登录成功会为用户生成以’u_'开头的默认昵称和默认为空的用户头像链接。

判断用户此时处于哪个步骤的代码如下：

// 获取当前授权阶段

public getCurrentAuthStep(): AuthStepType {

// 切换账号登录的时候，始终返回AuthStepType.ONE

const loginMode = this.getLoginMode();

if (loginMode === LoginMode.SWITCH_ACCOUNT) return AuthStepType.ONE;

// 用户身份定义非会员返回AuthStepType.ONE

const userInfo = this.getUser();

if (userInfo?.busiIdentity !== ‘MEMBER’) return AuthStepType.ONE;

// 初次登录，未授权用户信息，返回AuthStepType.TWO

if (userInfo.nickName.substring(0, 2) === ‘u_’ && !userInfo.headUrl)

return AuthStepType.TWO;

// 都有，返回AuthStepType.THREE

return AuthStepType.THREE;

}

3.2.2 用户登录触发场景

前面提到过，「用户登录」的 目的是为了整合各个渠道的交易、促销、收藏等数据，针对电商小程序，目前总结的需要用户登录的场景如下所示：

用户登录场景

即当用户登录小程序时，可以正常浏览浏览商品，只有触发某些特定行为，比如领券、加购、收藏、下单等，才会判断用户是否处于登录状态，如未登录，跳转登录页面。

如下所示，封装mustAuth方法进行拦截，未登录则跳转登录页面：

export default class Session {

…

public mustAuth({

mustAuthStep = AuthStepType.TWO, // 传人参数，需要授权的LEVEL

} = {}): Promise {

// 当前阶段处于会员态（2）或者会员信息态（3），执行resolve操作

if (this.getCurrentAuthStep() >= mustAuthStep) return Promise.resolve();

// 当前阶段处于游客态（1），跳转登录页

Navigator.gotoPage(‘/login/home’);

// 执行reject操作

return Promise.reject();

}

}

上述代码是跳转页面拦截，对于弹窗而言，需要把弹窗注入base-page(每个页面都需要引入的通用组件，封装每个页面都需要使用的通用方法，比如错误处理等)中，通过 id 查找到弹窗组件，并进行调用。

export default class Session {

…

public mustAuth({

mustAuthStep = AuthStepType.TWO, // 需要授权的LEVEL

popupCompName = ‘auth-flow-popup’,

} = {}): Promise {

// 当前阶段处于会员态（2）或者会员信息态（3），执行resolve操作

if (this.getCurrentAuthStep() >= mustAuthStep) return Promise.resolve();

// 获取弹窗组件

const pages = getCurrentPages();

const curPage = pages[pages.length - 1];

const context = curPage.$$basePage || curPage;

const popupComp = context.selectComponent(#${popupCompName});

// 容错处理

if (!popupComp) {

return Promise.reject(

new Error(

“当前页面未找到 #auth-popup 组件，请参考 ‘doc/登录组件的使用方式.md’”,

),

);

}

// 调用弹窗组件方法

popupComp.setMustAuthStep(mustAuthStep);

popupComp.nextStep();

// 等待授权成功回调

return this.waitAuth();

}

}

各个业务使用时可以通过session.mustAuth().then(() => {...});进行调用，为了提高使用体验，也可以使用装饰器@mustAuth()来修饰各个业务需求 类的方法，装饰器源码如下：

/**

* 登录检查装饰器，使用该装饰器的方法，会先执行授权检查，如果未授权，将跳转登录页面

*/

export default function mustAuth(option = {}) {

return function(

_target: Record<string, any>,

_propertyName: string,

descriptor: TypedPropertyDescriptor<(…args: any[]) => any>,

) {

const method = descriptor.value;

descriptor.value = function(…args: any[]) {

if (!session) return;

// 登录拦截

return session.mustAuth(option).then(() => {

if (method) return method.apply(this, args);

});

};

};

}

3.3 UI

---

3.3.1 基础组件

1. phone-container 组件

因为需要用户主动触发才能发起获取微信授权手机号接口，需用 button 组件的点击来触发。组件代码如下所示：

// index.wxml

// index.ts

export default class PhoneContainer extends BaseComponent {

getPhoneNumber(

e: WechatMiniprogram.Event<WechatMiniprogram.GetPhoneNumberCallbackResult>,

) {

this.triggerEvent(‘getphonenumber’, { …e.detail,  authType: AuthType.PHONE,});

}

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总