请求并发,多个请求队列等待登录完成执行 @Ariel

小程序项目开发遇到静默登录需求

用户进入小程序即自动登录，场景是在请求拦截中校验登录状态，如果没有即登录并使所有请求进入等待状态，在登录请求完成后再按照请求顺序配置token并返回响应。小程序具备分享等页面，因此在每个页面做登录校验明显不友好，因此直接在请求拦截中做请求队列操作最合适。
还有其他方案：校验到没有登录即登录并取消所有请求，在请求完成后刷新小程序onload，或者直接获取路由栈直接重新跳转当前页面（相当于网页刷新）等方案。个人更偏向于拦截，此贴记录，孤陋寡闻，大佬勿喷，敬请指教。

多的不说，直接贴代码，有详细注释（仅请求拦截处）

import Request from "luch-request"; // npm install luch-request 也可以使用其他插件，比如axios
const baseConfig = {dev: {apiUrl: "http://192.168.0.1/mqshchannel/" // 开发环境接口api},pro: {apiUrl: "https://192.168.0.1/mqshchannel/", // 生产环境接口api},header: {appId: "1111",channelCode: "",os: wx.getSystemInfoSync().system.indexOf('iOS') != -1 ? 'ios' : 'android',version: wx.getAccountInfoSync().miniProgram.version || '1.0.0'}
}let env = 'production'; // production线上
// let env = 'development' // development开发const getTokenStorage = () => {let token = "";try {token = uni.getStorageSync("token");} catch (e) {}return token;
};const http = new Request();
http.setConfig((config) => {/* 设置全局配置 */config.baseURL = `${env == "development"? baseConfig.dev.apiUrl: baseConfig.pro.apiUrl}`;config.header = {...config.header,...baseConfig.header};return config;
});let login = (config) => {return new Promise((resolve, reject) => {wx.login({success: (res) => {if (res.code) {wx.request({url: `${config.baseURL}login`, //仅为示例，并非真实的接口地址data: {code: res.code,},method: "POST",header: config.header,success(loginres) {uni.setStorageSync("token", loginres.data.data.accessToken);config.header = {...config.header,token: loginres.data.data.accessToken,};resolve(config);},});} else {reject("登录失败！" + res.errMsg);}},});})
}
let islogin = false; // 是否在登录进程中，是就不再调用，只需将请求排入队列中
let queryArr = []; // 请求队列http.interceptors.request.use(async(config) => {/* 请求之前拦截器。可以使用async await 做异步操作 */config.header = {...config.header,token: getTokenStorage() // 获取本地的token};// 请求时机改变，getApp实例在启动时未创建getApp().globalData.env = env;// 如果有token正常执行进程if (getTokenStorage()) {return config;} else {// 没有token先检查是否在登录进程中if (!islogin) {islogin = truelogin(config).then(callback => {// 结束登录进程标识islogin = false;// 说明登录完成，并且callback返回了token,进行token更新queryArr.map(cb => {// map只是为了触发cb方法，并不指望拿到新的数组cb(callback.header.token)})})}// 不管是否在登录进程中都需要把正常请求流程的请求config存入队列，并在登录完成时触发resolve回调let proval = await new Promise((resolve, reject) => {// dt是在调用时传入的参数，await必须使用，否则无法阻止进程继续执行queryArr.push((dt) => {/*将请求挂起*/config.header.token = dt;resolve(config);})});return proval}},(config) => {return Promise.reject(config);}
);http.interceptors.response.use(async(response) => {/* 请求之后拦截器。可以使用async await 做异步操作  */if (response.data.status !== 200) {uni.showToast({title: response.data.msg,icon: 'none'})return Promise.reject(response)}if (checkUrl(response.config.url)) {return response.data;}return response;},(response) => {// 请求错误做点什么。可以使用async await 做异步操作return Promise.reject(response);}
);export default http;

目前觉得体验较优，在此抛砖引玉，望各位大佬指教。
------------菜菜的程序媛

记录本次遇到的并发请求登录拦截问题相关推荐

查看并发请求数及其TCP连接状态
服务器上的一些统计数据: 1)统计80端口连接数 netstat -nat|grep -i "80"|wc -l 2)统计httpd协议连接数 ps -ef|grep httpd| ...
查看httpd并发请求数及其TCP连接状态
服务器上的一些统计数据: 1)统计80端口连接数 netstat -nat|grep -i "80"|wc -l 2)统计httpd协议连接数 ps -ef|grep httpd| ...
登陆拦截拦截ajax,过滤器实现登录拦截需要注意的问题（AJAX请求的处理）
1.问题描述: 最近自己在写demo时遇到一个问题,在ajax请求时用Filter做登录拦截,结果页面不跳转(Ajax是不能做转发和重定向的).... 最终的最终在同事zt的提示下,恍然大悟,虽然很基 ...
SpringBoot 整合JWT实现基于自定义注解的-登录请求验证拦截（保姆级教学，附：源码）
学习目标: Spring Boot 整合JWT实现基于自定义注解的登录请求接口拦截例: 一篇掌握 JWT 入门知识 1.1 在学习SpringBoot 整合JWT之前,我们先来说说JWT进行用户 ...
Vue3（撩课学院）笔记09-axios简介，发起get请求的两种方式，发起带参的get及post请求，发起并发请求，并发请求结果将数组展开，axios全局配置，axios配置及封装，请求和响应拦截
1.axios简介 axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests) 2.axio ...
uc浏览器请求被拦截报跨域踩坑记录
记录下开发时uc浏览器请求被拦截时遇到的问题请求在uc浏览器出现跨域问题 app使用uniapp开发,使用plus.runtime.launchApplication来打开并跳转指定页面,并在Xco ...
分布式系统并发请求限流平台Sentinel功能特性调研-集成测试（中篇）
摘要随着近些年系统稳定性要求越来越高,而系统限流则是其中提高系统稳定性的手段之一,而在众多限流平台中Sentinel凭着丰富功能特性和多次阿里双十一的线上实践,成为最热门限流平台之一,本文就Sen ...
程序猿修仙之路--数据结构之你是否真的懂数组？ c#socket TCP同步网络通信用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截...
程序猿修仙之路--数据结构之你是否真的懂数组? 数据结构但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构 .要想在之后的江湖历练中通关,数据结构必不可少.数据 ...
springboot整合shiro和session的详细过程和自定义登录拦截器
文章目录 1.shiro依赖 2.shiro配置 shiro过滤器配置: 关联自定义的其他管理器自定义会话工厂: 3.登陆时记录用户信息 4.shiro一些工具类的学习 5.自定义登录拦截器 shi ...

记录本次遇到的并发请求登录拦截问题

请求并发,多个请求队列等待登录完成执行 @Ariel

小程序项目开发遇到静默登录需求

多的不说，直接贴代码，有详细注释（仅请求拦截处）

记录本次遇到的并发请求登录拦截问题相关推荐

最新文章

热门文章