作者:汪奇超
在移动互联网时代,移动应用作为连接用户和服务的桥梁,扮演着至关重要的角色。随着技术的不断发展和用户需求的日益多样化,小程序以轻量、便捷、快速启动的特点逐渐替代了传统App。
用户的信息对于服务来说也是至关重要,不仅仅只是私域运营以及大数据分析。而服务去保证用户行为是否真实有效,对于用户的认证则是所有后续操作的基础。
我们采用AccessToken
和RefreshToken
的方式鉴权业务接口。
为了安全,我们的AccessToken
有效期一般设置较短,以避免被盗用。但过短的有效期会造成AccessToken
经常过期。
所以有了RefreshToken
,用来刷新AccessToken
, 有效期稍长。
在小程序环境中,有他的特殊性,微信则是他的唯一标识,衍生出来的则是UnionId和OpenId。所以在小程序环境中,对于用户登录来说,对于用户的最佳体验来说就是无感。
如果产品有对于用户手机号的需求,那则需要用户操作将手机号与用户关联起来,原因是对于手机号微信等平台对于手机号有严格的把控,需要用户授权才可以获悉。
现在来到了本篇文章的正题,如何来实现用户无感登录从而提升用户体验。
refreshToken
或者再次执行自动登录操作request
库401
错误的拦截,等待重置Token
后重试被拦截的借口这里都以微信端举例,其他平台大同小异。
wx.login(Object object) | 微信开放文档
const login = async() {
const { code, errMsg } = await wx.login();
// 通过接口服务端调用微信服务端接口获取用户标识,获取用户信息
const user = await loginFunc(code);
}
/**
* 匹配状态码
* @param response
* @param statusCode
*/
const matchStatusCode = (response, statusCode) => {
return [response.status, response.data.code].includes(statusCode);
};
/**
* 是否需要重试接口
* @param error
* @param updateConfig
*/
const whetherToRetry = async (error, updateConfig) => {
const { user } = rootStore; // 全局变量
if (
!matchStatusCode(error?.response, 401) || // 去除401以外的错误
user.isLogout || // 用户主动退出登录
error?.config?.meta?.reTry === false // 某些特殊场景不需要刷新token
)
return false;
await resetUser(); // 重置用户信息(重新获取token)
if (!user.token) return false; // 获取新token失败则中断
updateConfig({ // 更新token后重试接口
headers: {
Authorization: `Bearer ${user.token}`,
},
});
return true;
}
/**
* 重置用户
*/
const resetUser = async () => {
const { user, common } = rootStore;
if (user.isLogin) {
await user.refreshToken();
} else {
await silentLogin(); // 静默登录
}
};
现在就完成了第一步,自动刷新了Token。
要做到用户无感,肯定是需要延续用户之前的操作,完成用户动作。
userInited
记录用户重置状态requestQuene
来记录等待续接的接口请求队列/**
* 重置用户
*/
const resetUser = async () => {
const { user, common } = rootStore;
if (!user.userInited)
return new Promise((resolve) => {
common.setRequestQueue([...common.requestQueue, resolve]);
});
user.setUserInited(false);
if (user.isLogin) {
await user.refreshToken();
} else {
await silentLogin();
}
user.setUserInited(true);
};
constructor() {
reaction(
() => this.userInited,
(arg) => {
if (arg) {
const { common } = rootStore;
common.requestQueue.forEach((item) => item()); // 执行等待队列
common.setRequestQueue([]);
}
}
);
}
如果用户信息还未完成初始化时,前置将需要鉴权的接口加入等待队列,减少无用的请求执行
/**
* 等待初始化用户结束
*/
const waitForUserInited = async () => {
const { user, common } = rootStore;
if (user.userInited) return Promise.resolve();
// 未初始化则将请求阻塞在队列中
return new Promise((resolve) => {
common.setRequestQueue([...common.requestQueue, resolve]);
});
};
http.tap('request', async (config) => {
const { user } = rootStore;
// 需要授权接口
if (!NO_AUTH_URL.includes(config.rawURL)) {
await waitForUserInited();
config.headers.Authorization = `Bearer ${rootStore.user.token}`;
}
// ....
}
📚 小茗文章推荐:
关注公众号「Goodme前端团队」,获取更多干货实践,欢迎交流分享~