微信小程序静默登录和维护自定义登录态详解

目录

• 1.背景
• 2.什么是静默登录？
• 3.如何维护自定义登录态
• 4.静默登录整体流程

• 4.1app.onLaunch中发起登录
• 4.2处理小程序不支持异步阻塞

• 4.2.1粗糙的方案
• 4.2.2优雅的方式

export async function doLogin() {
 if (isLogin) return false
 isLogin = true
 removeCache('token')
 const { code } = await wxp.login()
 const data = await login({ code })
 setCache('token', data.data.token)
 isLogin = false
 return true
}
服务端拿到code，调用auth.code2Session接口换取openid
const getOpenid = async function (appid, secret, code) {
    const resData = await axios.get('https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret + '&js_code=' + code + '&grant_type=authorization_code');
    return resData.data;
}

wx.checkSession({
  success () {
    //session_key 未过期，并且在本生命周期一直有效
  },
  fail () {
    // session_key 已经失效，需要重新执行登录流程
    wx.login() //重新登录
  }
})

//app.js
this.globalData.wxp.showLoading({
        title: '登录中...'
      });
      await login();
      this.globalData.hasLogin = true;
      if (this.checkLoginReadyCallback) {
        this.checkLoginReadyCallback();
      }
      this.globalData.wxp.hideLoading();
页面的生命周期中
async onLoad() {
    if (app.globalData.hasLogin) {
    //如果已经登录了直接获取数据
      this.getUserInfo();
      this.getEvent();
    } else {
    //未登录定义下回调函数，等app.js登录成功之后进行调用
      app.checkLoginReadyCallback = async () => {
        this.getUserInfo();
        this.getEvent();
      };
    }
  },

//拦截处理
fly.interceptors.request.use(async (request) => {
	//没有token且请求不是白名单的都锁住
	if (
		!getCache('token') &&
		!whiteList.some((item) => request.url.startsWith(item))
	) {
		fly.lock()
		//去登陆 成功之后再unlock
		await doLogin()
		fly.unlock() //解锁后，会继续发起请求队列中的任务
	}
	if (getCache('token') && !fly.config.headers['Authorization']) {
		request.headers['Authorization'] = getCache('token')
	}
	request.headers['Content-Type'] = 'application/x-www-form-urlencoded'
	return request
})

// 响应拦截
fly.interceptors.response.use(
	(response) => {
		//只将请求结果的data字段返回
		return response.data
	},
	async (err) => {
		if (err.status === 401) {
			//401之后，把后面的请求都锁死 防止再次401
			fly.lock()
			removeCache('token')
			//去登陆 成功之后再unlock
			const isLoginSuccess = await doLogin()
			if (isLoginSuccess) {
				fly.unlock()
			}
                        //新执行本次由于token过期被服务器拒绝的接口
			return fly.request(err.request)
		}
	}
)

export async function doLogin() {
        //如果正在登录中则不执行
	if (isLogin) return false
	isLogin = true
        //修改状态为登录中，反正重复多次登录
	removeCache('token')
	const { code } = await wxp.login()
	const data = await login({ code })
	setCache('token', data.data.token)
	isLogin = false
	return true
}