微信小程序实现静默登录

一:流程导图

在这里插入图片描述

二:代码实现(http.js)

import md5 from './md5';
let temp_request = [],
  is_freshing = false;
/**
 * @param {string} url
 * @param {string} method
 * @param {Object} data
 * @param {Boolean} loading
 */
const http = function (url, method, data, loading) {
  let params_ = arguments;
  return new Promise((resolve, reject) => {
    if (loading) {
      wx.showToast({
        title: '加载中',
        icon: 'loading',
        duration: 10000,
      });
    }
    var userId = wx.getStorageSync('userInfo').userId || '';
    const timestamp = new Date().getTime();
    const random = parseInt(Math.random() * 10000);
    const token = wx.getStorageSync('userInfo').token || '';
    wx.request({
      url,
      method,
      data,
      header: {
        'content-type': 'application/json',
        os: 'wechatBusinessApplet',// 自定义参数,使用不需要则删除
        uid: userId,// 自定义参数,使用不需要则删除
        random: random,// 自定义参数,使用不需要则删除
        timestamp: timestamp,// 自定义参数,使用不需要则删除
        sign: md5(`${userId}@${timestamp}_${random}&${token}=${userId}`),// 自定义参数,使用不需要则删除
      },
      success(res) {
        let code = res.data.status;
        switch (code) {
          case 1:
            resolve(res.data);
            break;
          case 200:
            resolve(res.data);
            break;
          case 401:
            // token 过期
            if (!is_freshing) {
              refresh();
            }
            // 关键步骤,重新请求失败的接口
            resolve(
              new Promise((resole) => {
                temp_request.push(() => {
                  resole(http(...params_));
                });
              })
            );
            break;
          case 500:
            resolve(res.data);
            break;
          case 50001:
            resolve(res.data);
            break;
          case 50002:
            resolve(res.data);
            break;
          default:
            reject(res.data);
        }
      },
      fail(error) {
        reject(error.data);
      },
      complete(res) { },
    });
  });
};

function refresh() {
  is_freshing = true;
  wx.login({
    success: function (res) {
      if (res.errMsg === 'login:ok') {
        wx.request({
          url: `xxxxx`,
          data: {},
          header: {},
          success(res) {
            if (res.data) {
              // 成功业务...
              
              } else {
                // 任务流程处理...
                is_freshing = false;
                temp_request.map((cb) => cb());
                // 清空temp_request
                temp_request = [];
              }
            }
          },
        });
      }
    },
  });
}
export default http;

UniApp 是一款基于 Vue.js 的跨平台框架,可以快速构建统一的前端界面,同时支持微信小程序、H5、App 等多种形态。关于微信小程序的全局静默登录,它是指用户授权登录时,不需要直接显示登录页面或者输入密码,而是后台自动完成登录过程,通常是在用户首次授权后设置。 在 UniApp 中实现微信小程序的全局静默登录,你需要按照以下步骤操作: 1. **配置权限**: 在项目配置文件 `config.js` 中添加 `wx.login` 权限: ```javascript window.globalData.wxOptions = { debug: process.env.NODE_ENV !== 'production', appId: 'your_app_id', // 小程序 AppID timestamp: '', nonceStr: '', signature: '', jsApiList: ['login'] }; ``` 2. **获取用户信息**: 当用户第一次授权后,可以在生命周期钩子 `onLaunch` 或者需要登录的地方调用 `wx.login` 获取临时code: ```javascript wx.login({ success(res) { // 调用微信统一下单接口换取永久 code uni.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data: { ...res, jsCode: res.code, grantType: 'authorization_code' }, method: 'POST', header: { 'content-type': 'application/json' }, success: (res) => { // 存储或发送永久 code 到服务器进行后续处理 } }); } }); ``` 3. **保存用户信息**: 成功获取到用户的 session_key 后,将其存储在本地或者服务器上,用于后续访问时进行身份验证。 4. **全局检查登录状态**: 可以通过 `uni.getUserInfo` 检查用户是否已登录,如果已经登录则无需再次请求授权。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值