미니 프로그램에서 로그인 기능을 구현하는 방법에 대한 간략한 분석

미니 프로그램에서 로그인 기능을 어떻게 구현하나요? 이 기사에서는 미니 프로그램 로그인을 여는 올바른 방법을 소개하겠습니다. 도움이 되길 바랍니다!

미니 프로그램 네트워크 구성 요소

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

Request작업 설명

Method	Description
RequestTask.abort()	요청 작업을 중단합니다.
RequestTask.onHeadersReceived(함수 콜백)	HTTP 응답 헤더 이벤트를 수신합니다. 요청 완료 이벤트보다 먼저 발생합니다.
RequestTask.offHeadersReceived(함수 콜백)	HTTP 응답 헤더 이벤트 수신을 취소합니다.
RequestTask.onChunkReceived(함수 콜백)	Transfer-Encoding Chunk 수신 이벤트를 듣습니다. 새로운 청크가 수신되면 시작됩니다.
RequestTask.offChunkReceived(함수 콜백)	Transfer-Encoding Chunk received 이벤트 수신을 취소합니다.

wx.request(Object object) attribute

여기에는 더 일반적으로 사용되는 속성만 나열되어 있습니다. 모든 속성에 대해서는 링크를 참조하세요.

Property	Type	기본값	필수	Description
url	string		예	개발자 서버 인터페이스 주소
data	string /object/ArrayBuffer		No	요청된 매개변수
header	Object		No	요청된 헤더를 설정할 수 없습니다. content-type 默认为 application/json
timeout	number		No	Timeout(밀리초)
method	string	GET	No	HTTP 요청 방법
성공	함수		No	인터페이스 호출 성공을 위한 콜백 함수
fail	function		No	인터페이스 호출 실패 콜백 함수
complete	function		아니요	중단된 요청이더라도 인터페이스 호출이 끝나면 콜백 함수(호출 성공/실패 여부에 관계없이 실행됨)!

요약하자면 모든 미니 프로그램 인터페이스에는 기본적으로 두 가지 특성이 있습니다.

• 매개변수는 모두 객체입니다. 기억하기 쉽고 확장하기 쉽습니다.

• 모두 동일한 결과 처리 방법을 사용합니다. 모두 성공, 실패, 완료라는 세 가지 콜백 속성이 있습니다.

인터페이스 실행의 다양한 상황에서 사용되는 errMsg 객체를 소개합니다.

콜백 속성	errMsg 개체
success	{errMsg:"request:ok"...}
fail	{er rM sg:"요청:실패". . .} 일부 시스템에서는 실패 뒤에 공백이 있으므로 이러한 판단을 사용하려면 정규식을 사용하는 것이 가장 좋습니다. indexOf 함수를 사용하여 -1보다 큰지 판단할 수도 있습니다.
abort	{errMsg:"요청:실패 중단"...}

샘플 코드

  let reqTask = wx.request({
      url: getApp().globalData.api,
      success(res) {
        if (res.errMsg === "request:ok") console.log("res", res);
      },
      fail(err) {
        // if(err.errMsg.indexOf('request:fail')>-1) console.log('err', err);
        if (/^request:fail/i.test(err.errMsg)) console.log("err", err);
      },
      complete(res) {
        console.log("resOrErr", res);
      },
    });
   const reqTaskOnHeadersReceived = (headers) => {
      reqTask.offHeadersReceived(reqTaskOnHeadersReceived);
      console.log("headers", headers);
      // 由于请求还未完全结束，所以我们没办法获得请求的状态码，但是我们可以通过返回的requestBody的长度来进行判断。
      // 两点说明：1. 两个~~可以把字符串数字快速转化为数字。
      // 2. 为什么取小于19，是由于后台返回没有权限的requestBody的时候Content-length为“18”，正常情况下是大于19的。所以具体多少得看一下具体情况。
      if (~~headers.header["Content-length"] < 19) reqTask.abort();
    };
    reqTask.onHeadersReceived(reqTaskOnHeadersReceived);

미니 프로그램 로그인 인터페이스

• wx.getUserProfile(Object 개체)

  사용자 정보를 가져옵니다. 페이지에서 클릭 이벤트가 발생합니다(예: button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo, 자세한 내용은 사용자 정보 인터페이스 조정 지침을 참조하세요.

• wx.checkSession(Object object)

  로그인 상태가 만료되었는지 확인하세요. 사용자 로그인 상태 wx.login 인터페이스를 통해 얻은 정보는 일정 시간 동안 미니 프로그램을 사용하지 않을수록 사용자의 로그인 상태가 무효화될 가능성이 높습니다. 특정 타이밍 로직은 WeChat에 의해 유지되며 개발자에게 투명하게 공개됩니다. 개발자는 현재 사용자 로그인 상태가 유효한지 확인하기 위해 wx.checkSession 인터페이스만 호출하면 됩니다.

  로그인 상태가 만료된 후 개발자는 wx를 호출할 수 있습니다. .login을 사용하여 새 사용자 로그인 상태를 얻으세요. 호출이 성공하면 현재 session_key가 만료되었음을 의미하고, 호출이 실패하면 Mini 프로그램 로그인을 참조하세요. wx.login(Object object)

• 사용자 로그인 상태 정보(코드)를 얻기 위한 인터페이스를 호출합니다. 현재 미니 프로그램의 고유 식별자(openid), WeChat 오픈 플랫폼 계정의 고유 식별자(unionid, 경우) 현재 미니 프로그램은 위챗 오픈 플랫폼 계정에 바인딩되어 있으며, 이 로그인의 세션 키(session_key) 등이 있습니다. 자세한 내용은

  미니 프로그램 로그인을 참조하여 암호화 및 복호화 통신을 완료해야 합니다.

  백엔드 로그인 인터페이스 코드 구현

백엔드는 NodeJS, 웹 프레임워크 KOA 버전 ^2.13, 라우팅 프레임워크 @koa/라우터 버전 ^10.1.1, 프레임워크 요청, 버전 ^2.88을 사용합니다. 2, jsonwebtoken은 토큰 정보를 암호화하고 해독하는 데 사용됩니다. 버전 ^8.5.1

// app.js
const Koa = require("koa");
const Router = require("@koa/router");
const WeixinAuth = require("./lib/koa2-weixin-auth");
const jsonwebtoken = require("jsonwebtoken");

const app = new Koa();
// 小程序机票信息
const miniProgramAppId = "*********";
const miniProgramAppSecret = "***********";
const weixinAuth = new WeixinAuth(miniProgramAppId, miniProgramAppSecret);

const JWT_SECRET = "JWTSECRET";
// 路由中间件需要安装@koa/router
// 开启一个带群组的路由
const router = new Router({
  prefix: "/user",
});
// 这是正规的登陆方法
// 添加一个参数，sessionKeyIsValid，代表sessionKey是否还有效
router.post("/weixin-login", async (ctx) => {
  let { code, userInfo, encryptedData, iv, sessionKeyIsValid } =
    ctx.request.body;
   // 解析openid
  const token = await weixinAuth.getAccessToken(code);
  userInfo.openid = token.data.openid;
  // 这里可以自己进行处理，比方说记录到数据库,处理token等
  let authorizationToken = jsonwebtoken.sign(
    { name: userInfo.nickName },
    JWT_SECRET,
    { expiresIn: "1d" }
  );
  Object.assign(userInfo, { authorizationToken });
  ctx.status = 200;
  ctx.body = {
    code: 200,
    msg: "ok",
    data: userInfo,
  };
});

// lib/koa2-weixin-auth.js
const querystring = require("querystring");
const request = require("request");

const AccessToken = function (data) {
  if (!(this instanceof AccessToken)) {
    return new AccessToken(data);
  }
  this.data = data;
};

/*!
 * 检查AccessToken是否有效，检查规则为当前时间和过期时间进行对比
 *
 * Examples:
 * ```
 * token.isValid();
 * ```
 */
AccessToken.prototype.isValid = function () {
  return (
    !!this.data.session_key &&
    new Date().getTime() < this.data.create_at + this.data.expires_in * 1000
  );
};

/**
 * 根据appid和appsecret创建OAuth接口的构造函数
 * 如需跨进程跨机器进行操作，access token需要进行全局维护
 * 使用使用token的优先级是：
 *
 * 1. 使用当前缓存的token对象
 * 2. 调用开发传入的获取token的异步方法，获得token之后使用（并缓存它）。

 * Examples:
 * ```
 * var OAuth = require(&#39;oauth&#39;);
 * var api = new OAuth(&#39;appid&#39;, &#39;secret&#39;);
 * ```
 * @param {String} appid 在公众平台上申请得到的appid
 * @param {String} appsecret 在公众平台上申请得到的app secret
 */
const Auth = function (appid, appsecret) {
  this.appid = appid;
  this.appsecret = appsecret;
  this.store = {};

  this.getToken = function (openid) {
    return this.store[openid];
  };

  this.saveToken = function (openid, token) {
    this.store[openid] = token;
  };
};

/**
 * 获取授权页面的URL地址
 * @param {String} redirect 授权后要跳转的地址
 * @param {String} state 开发者可提供的数据
 * @param {String} scope 作用范围，值为snsapi_userinfo和snsapi_base，前者用于弹出，后者用于跳转
 */
Auth.prototype.getAuthorizeURL = function (redirect_uri, scope, state) {
  return new Promise((resolve, reject) => {
    const url = "https://open.weixin.qq.com/connect/oauth2/authorize";
    let info = {
      appid: this.appid,
      redirect_uri: redirect_uri,
      scope: scope || "snsapi_base",
      state: state || "",
      response_type: "code",
    };
    resolve(url + "?" + querystring.stringify(info) + "#wechat_redirect");
  });
};

/*!
 * 处理token，更新过期时间
 */
Auth.prototype.processToken = function (data) {
  data.create_at = new Date().getTime();
  // 存储token
  this.saveToken(data.openid, data);
  return AccessToken(data);
};

/**
 * 根据授权获取到的code，换取access token和openid
 * 获取openid之后，可以调用`wechat.API`来获取更多信息
 * @param {String} code 授权获取到的code
 */
Auth.prototype.getAccessToken = function (code) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/jscode2session";
    //由于此框架版本很久没有更新了，此处地址发生了变化，需要修改为以上地址，不然会出现
    //41008错误。这也是没有直接使用框架，引用本地使用的原因。
    // const url = "https://api.weixin.qq.com/sns/oauth2/access_token";
    const info = {
      appid: this.appid,
      secret: this.appsecret,
      js_code: code,
      grant_type: "authorization_code",
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        const data = JSON.parse(body);
        resolve(this.processToken(data));
      }
    });
  });
};

/**
 * 根据refresh token，刷新access token，调用getAccessToken后才有效
 * @param {String} refreshToken refreshToken
 */
Auth.prototype.refreshAccessToken = function (refreshToken) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/oauth2/refresh_token";
    var info = {
      appid: this.appid,
      grant_type: "refresh_token",
      refresh_token: refreshToken,
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        const data = JSON.parse(body);
        resolve(this.processToken(data));
      }
    });
  });
};

/**
 * 根据openid，获取用户信息。
 * 当access token无效时，自动通过refresh token获取新的access token。然后再获取用户信息
 * @param {Object|String} options 传入openid或者参见Options
 */
Auth.prototype.getUser = async function (openid) {
  const data = this.getToken(openid);
  console.log("getUser", data);
  if (!data) {
    var error = new Error(
      "No token for " + options.openid + ", please authorize first."
    );
    error.name = "NoOAuthTokenError";
    throw error;
  }
  const token = AccessToken(data);
  var accessToken;
  if (token.isValid()) {
    accessToken = token.data.session_key;
  } else {
    var newToken = await this.refreshAccessToken(token.data.refresh_token);
    accessToken = newToken.data.session_key;
  }
  console.log("accessToken", accessToken);
  return await this._getUser(openid, accessToken);
};

Auth.prototype._getUser = function (openid, accessToken, lang) {
  return new Promise((resolve, reject) => {
    const url = "https://api.weixin.qq.com/sns/userinfo";
    const info = {
      access_token: accessToken,
      openid: openid,
      lang: lang || "zh_CN",
    };
    request.post(url, { form: info }, (err, res, body) => {
      if (err) {
        reject(err);
      } else {
        resolve(JSON.parse(body));
      }
    });
  });
};

/**
 * 根据code，获取用户信息。
 * @param {String} code 授权获取到的code
 */
Auth.prototype.getUserByCode = async function (code) {
  const token = await this.getAccessToken(code);
  return await this.getUser(token.data.openid);
};

module.exports = Auth;

미니 터미널 로그인 코드 구현

<!--pages/index.wxml-->
<view class="page-section">
    <text class="page-section__title">微信登录</text>
    <view class="btn-area">
        <button  bindtap="getUserProfile" type="primary">登录</button>
    </view>
</view>

// pages/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  // 正确的登录方式
  getUserProfile() {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        let { userInfo, encryptedData, iv } = res;
        const requestLoginApi = (code) => {
          // 发起网络请求
          wx.request({
            url: "http://localhost:3000/user/weixin-login",
            method: "POST",
            header: {
              "content-type": "application/json",
            },
            data: {
              code,
              userInfo,
              encryptedData,
              iv,
            },
            success(res) {
              console.log("请求成功", res.data);
              let token = res.data.data.authorizationToken;
              wx.setStorageSync("token", token);
              onUserLogin(token);
              console.log("authorization", token);
            },
            fail(err) {
              console.log("请求异常", err);
            },
          });
        };
        const onUserLogin = (token) => {
          getApp().globalData.token = token;
          wx.showToast({
            title: "登录成功了",
          });
        };
        //必须进行session是否过期检查，不然会出现第一次点击登录，服务器报Illegal Buffer
        //的错误，但是第二次点击登录正常。
        wx.checkSession({
          success: (res) => {
            // session_key 未过期，并且在本生命周期一直有效
            console.log("在登陆中");
            let token = wx.getStorageSync("token");
            if (token) onUserLogin(token);
          },
          fail: (res) => {
            // session_key已经失效，需要重新执行登录流程
            wx.login({
              success(res0) {
                if (res0.code) {
                  requestLoginApi(res0.code);
                } else {
                  console.log("登录失败!" + res0.errMsg);
                }
              },
            });
          },
        });
      },
    });
  },
});

로그인 코드에 대해 어떤 최적화를 수행할 수 있나요? 소프트웨어, 코드 수준에서 가장 기본적인 측면을 추구해야 합니다(이것보다 훨씬 더 많지만 먼저 해보자). ):

Maintainability소위 "유지 관리"는 이러한 작업에 지나지 않습니다. 버그 수정, 기존 코드 수정, 새 코드 추가 등 소위 "코드가 유지 관리하기 쉽다"는 것은 코드에서 원래 코드 디자인을 파괴하거나 새로운 버그가 발생하지 않고 빠르게 수정되거나 추가될 수 있음을 의미합니다. 코드는 유지 관리가 쉽지 않습니다."라는 말은 코드를 수정하거나 추가하면 새로운 버그가 발생할 위험이 크다는 의미이며, 완료하는 데 시간이 오래 걸린다는 의미입니다.

Readability

소프트웨어 설계 전문가인 마틴 파울러(Martin Fowler)는 다음과 같이 말했습니다. "어떤 바보라도 글을 쓸 수 있습니다. 좋은 프로그래머는 인간이 이해할 수 있는 코드를 작성합니다." 중국어로 번역하면 "어떤 바보라도 컴퓨터가 이해할 수 있는 코드를 작성할 수 있습니다. 좋은 프로그래머는 사람이 이해할 수 있는 코드를 작성할 수 있습니다. "구글에는 가독성이라는 특별한 인증도 있습니다. 이 인증을 획득한 엔지니어만이 코드 검토 중에 다른 사람의 코드 제출을 승인할 수 있는 자격이 있습니다. 코드의 가독성이 얼마나 중요한지 알 수 있습니다. 결국 코드를 ​​읽게 됩니다. 작성하고 실행한 횟수보다 코드가 코딩 표준을 준수하는지, 이름 지정이 의미가 있는지, 주석이 상세한지, 함수 길이가 적절한지, 모듈이 적절한지 확인해야 합니다. 높은 응집력과 낮은 결합도 등을 충족하는지 여부가 명확합니다.

• Extensibility(확장성)

Extensibility도 코드 품질을 평가하는 데 매우 중요한 기준입니다. 코드에는 일부 기능 확장 지점을 직접 삽입할 수 있습니다. 필요 없이 기능 코드를 확장 지점에 추가하세요. 기능을 추가하고 원본 코드를 많이 변경하세요

• 재사용성

  .

  代码的可复用性可以简单地理解为，尽量减少重复代码的编写，复用已有的代码。

那么接下来就来优化一下代码吧：

模块化

可以把登录的代码模块化，代码如下：

// lib/login.js
function loginWithCallback(cb) {
  // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
  // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  wx.getUserProfile({
    desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      let { userInfo, encryptedData, iv } = res;
      const requestLoginApi = (code) => {
        // 发起网络请求
        wx.request({
          url: "http://localhost:3000/user/weixin-login",
          method: "POST",
          header: {
            "content-type": "application/json",
          },
          data: {
            code,
            userInfo,
            encryptedData,
            iv,
          },
          success(res) {
            console.log("请求成功", res.data);
            let token = res.data.data.authorizationToken;
            wx.setStorageSync("token", token);
            onUserLogin(token);
            console.log("authorization", token);
          },
          fail(err) {
            console.log("请求异常", err);
          },
        });
      };

      const onUserLogin = (token) => {
        getApp().globalData.token = token;
        wx.showToast({
          title: "登录成功了",
        });
        if (cb && typeof cb == "function") cb(token);
      };
      wx.checkSession({
        success: (res) => {
          // session_key 未过期，并且在本生命周期一直有效
          console.log("在登陆中");
          let token = wx.getStorageSync("token");
          if (token) onUserLogin(token);
        },
        fail: (res) => {
          // session_key已经失效，需要重新执行登录流程
          wx.login({
            success(res0) {
              if (res0.code) {
                requestLoginApi(res0.code);
              } else {
                console.log("登录失败!" + res0.errMsg);
              }
            },
          });
        },
      });
    },
  });
}

export default loginWithCallback;

Promise化

回调地狱问题，不利于代码的阅读，所以接下来我们基于Promise进行代码优化。有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise的几个方法简介

메서드 이름	Description
Promise.prototype.then	메서드는 새로운 Promise 객체를 반환하므로 체인 방식으로 작성할 수 있습니다. 이 설계를 통해 중첩된 비동기 작업을 콜백 함수의 "수평 개발"에서 "하향 개발"로 쉽게 다시 작성할 수 있습니다.
Promise.prototype.catch	는 Promise.prototype.then(null, Rejection)의 별칭으로, 오류 발생 시 콜백 함수를 지정하는 데 사용됩니다. Promise 객체의 오류는 "거품" 특성을 가지며 발견될 때까지 뒤로 전파됩니다. 즉, 오류는 항상 다음 catch 문에서 포착됩니다.
Promise.prototype.finally	메서드는 PromisePromise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。
Promise.all	这避免了同样的语句需要在then()和catch()中各写一次的情况。Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。Promise.all 方法接受一个数组作为参数，var p = Promise.all([p1,p2,p3]);p1、p2、p3 都是 Promise 对象的实例。（Promise.all 方法的参数不一定是数组，但是必须具有 iterator 接口，且返回的每个成员都是 Promise 实例。）p 的状态由 p1、p2、p3 决定，分成两种情况。 （1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。 （2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
Promise.race	Promise.race 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。var p = Promise.race([p1,p2,p3]);上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的Promise实例的返回值，就传递给p的返回值。
Promise.any	接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。所有子实例都处于rejected状态，总的promise才处于rejected状态。
Promise.allSettled	返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。相比之下，Promise.all() 更适合彼此相互依赖或者在其中任何一个reject를 반환합니다. Promise가 끝나면 결과가 이행되거나 거부되는지에 관계없이 지정된 콜백 함수가 실행됩니다. 이는 Promise가 성공적으로 완료되었는지 여부에 관계없이 실행되어야 하는 코드에 대한 방법을 제공합니다.

Promise.all🎜🎜🎜이렇게 하면 🎜then()🎜 및 🎜catch()🎜에서 동일한 문을 한 번 작성해야 하는 상황을 피할 수 있습니다. Promise.all 메서드는 여러 Promise 인스턴스를 새 Promise 인스턴스로 래핑하는 데 사용됩니다. Promise.all 메소드는 배열을 매개변수로 허용합니다. var p = Promise.all([p1,p2,p3]);p1, p2, p3은 모두 Promise 객체의 인스턴스입니다. (Promise.all 메서드의 매개 변수는 반드시 배열일 필요는 없지만 반복자 인터페이스가 있어야 하며 반환된 각 멤버는 Promise 인스턴스입니다.) p의 상태는 p1, p2, p3에 의해 결정되며 다음과 같이 나뉩니다. 두 가지 상황. (1) p1, p2, p3의 상태가 모두 이행되어야 p의 상태가 이행됩니다. 이때 p1, p2, p3의 반환 값은 배열을 형성하여 전달됩니다. p의 콜백 함수. (2) p1, p2, p3 중 하나가 거부되면 p의 상태는 거부됩니다. 이때 첫 번째 거부된 인스턴스의 반환 값은 p의 콜백 함수에 전달됩니다. 🎜🎜🎜🎜 Promise.race🎜🎜🎜Promise.race 메소드는 여러 Promise 인스턴스를 새로운 Promise 인스턴스로 래핑합니다. var p = Promise.race([p1,p2,p3]);위 코드에서는 p1, p2, p3 중 하나의 인스턴스가 먼저 상태를 변경하는 한 p의 상태가 변경됩니다. 그에 따라 변경하십시오. 먼저 변경된 Promise 인스턴스의 반환 값이 p의 반환 값으로 전달됩니다. 🎜🎜🎜🎜 Promise.any🎜🎜🎜는 Promise 반복 가능 개체를 받습니다. Promise 중 하나가 성공하면 성공적인 Promise가 반환됩니다. 모든 하위 인스턴스는 거부됨 상태이고, 전체 프로미스는 거부됨 상태입니다. 🎜🎜🎜🎜 Promise.allSettled🎜🎜🎜 주어진 모든 약속이 이행 또는 거부된 후 개체 배열을 사용하여 약속을 반환합니다. 각 개체는 해당 약속 결과를 나타냅니다. 반대로 Promise.all()은 서로 종속되거나 둘 중 하나가 거부될 때 즉시 종료되는 경우에 더 적합합니다. 🎜🎜🎜🎜

小程序API接口Promise化并且把需要登录的调用接口模块化

1、安装插件。请先查看npm支持文档。

npm install --save miniprogram-api-promise

2、在微信开发者工具右方详情中勾选使用npm模块，并在菜单栏工具中点击构建npm。

3、初始化代码。

// app.js
import {promisifyAll} from 'miniprogram-api-promise'
import login from "../lib/login";
const wxp ={}
promisifyAll(wx,wxp)
// 需要token的请求统一处理登录和设置header，并且处理错误信息
wxp.requestNeedLogin = async function (args) {
  let token = wx.getStorageSync("token");
  if (!token) {
    token = await loginWithPromise();
  }
  if (!args.header) args.header = {};
  args.header["Authorization"] = `Bearer ${token}`;
  return wxp.request(args).catch(console.error);
};
// app.js
App({
  wxp:wxp,
});

4、改写login.js代码

// lib/login.js
function login() {
  return new Promise((resolve, reject) => {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
       success:async (res0) => {
        let {
          userInfo,
          encryptedData,
          iv
        } = res0;
        const app = getApp();
        try {
          app.wxp.checkSession();
        } catch (err) {
          reject(err);
        }
        let token = wx.getStorageSync("token");
        if (!token) {
          let res1 = await app.wxp.login().catch(err => reject(err));
          let code = res1.code;
          let res = await app.wxp.request({
            url: "http://localhost:3000/user/weixin-login",
            method: "POST",
            header: {
              "content-type": "application/json",
            },
            data: {
              code,
              userInfo,
              encryptedData,
              iv,
            }
          }).catch(err => reject(err));
          token = res.data.data.authorizationToken;
          wx.setStorageSync("token", token);
          app.globalData.token = token;
          wx.showToast({
            title: "登录成功了",
          });
          resolve(token);
        }
      },
    });
  })
}

export default login;

5、调用代码

<view class="container page-head">
  <text class="page-section__title">需要登录的请求调用</text>
  <view class="btn-area">
    <button bindtap="request1" type="primary">请求1</button>
    <button bindtap="request2" type="primary">请求2</button>
  </view>
</view>

// pages/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  request1() {
    getApp().wxp.requestNeedLogin({
        url: "http://localhost:3000/user/home?name=andying",
      }).then(console.log)
  },
  request2() {
    getApp().wxp.requestNeedLogin({
        url: "http://localhost:3000/user/home?name=eva",
      }).then(console.log)
  },
});

【相关学习推荐：小程序开发教程】

위 내용은 미니 프로그램에서 로그인 기능을 구현하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!