微信小程序授权登陆方案以及在Taro下利用Decorator修饰器实现

2023-12-28 05:50:39

前言

微信小程序作为一款广受欢迎的移动应用开发框架，提供了丰富的功能和便捷的开发体验。其中，用户授权登录是小程序开发中不可或缺的重要功能之一。通过授权登录，开发者可以获取用户的基本信息，以便提供更个性化和有针对性的服务。

在Taro框架下，我们可以利用Decorator修饰器来实现授权登录功能。Decorator修饰器是一种强大的语法糖，它允许我们在不修改函数本身的情况下，为函数添加额外的功能。利用Decorator修饰器，我们可以劫持页面的声明周期，等待封装好的用户登录逻辑执行完以后，再进行当前声明周期里面其他调用的执行。

Decorator修饰器的使用

在Taro框架中，我们可以使用@修饰器语法来定义Decorator修饰器。例如，以下是一个简单的Decorator修饰器，它会在函数执行前打印一条日志：

function log(target, name, descriptor) {
  const oldValue = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with args ${JSON.stringify(args)}`);
    return oldValue.apply(this, args);
  };
}

@log
function sayHello(name) {
  console.log(`Hello ${name}!`);
}

sayHello('World'); // Calling sayHello with args ["World"]
// Hello World!

在这个示例中，@log修饰器被应用到了sayHello函数上。当sayHello函数被调用时，log修饰器会首先打印一条日志，然后调用sayHello函数的原始实现。

劫持页面声明周期

在Taro框架中，我们可以利用Decorator修饰器来劫持页面的声明周期。例如，以下是一个Decorator修饰器，它会在页面加载前检查用户是否已经授权登录：

function checkAuth(target, name, descriptor) {
  const oldValue = descriptor.value;
  descriptor.value = function(...args) {
    if (!this.$store.state.user.isLogin) {
      wx.navigateTo({
        url: '/pages/login/index'
      });
      return;
    }

    return oldValue.apply(this, args);
  };
}

在这个示例中，checkAuth修饰器被应用到了Page类的onLoad方法上。当页面加载时，onLoad方法会被调用。在onLoad方法中，checkAuth修饰器首先会检查用户是否已经授权登录。如果用户尚未授权登录，则会跳转到登录页面。否则，将继续执行onLoad方法的原始实现。

封装用户登录逻辑

在Taro框架中，我们可以利用async/await语法来封装用户登录逻辑。例如，以下是一个封装了用户登录逻辑的函数：

async function login() {
  try {
    const res = await wx.login();

    const {code} = res;

    const {data} = await this.$http.post('/api/login', {
      code
    });

    this.$store.commit('setUser', data);

    return data;
  } catch (error) {
    console.error(error);
  }
}

在这个示例中，login函数首先调用wx.login()方法获取用户的登录凭证。然后，将登录凭证发送到服务器，并使用服务器返回的用户信息更新本地存储。最后，将用户信息返回给调用方。

分享助力的场景示例

在分享助力的场景下，新用户点击分享用户的卡片进来小程序，需要弹出一个授权弹框等用户授权。我们可以利用Decorator修饰器和async/await语法来实现这个功能。

function checkAuthAndShare(target, name, descriptor) {
  const oldValue = descriptor.value;
  descriptor.value = async function(...args) {
    if (!this.$store.state.user.isLogin) {
      wx.navigateTo({
        url: '/pages/login/index'
      });
      return;
    }

    const {id} = this.options;

    const {data} = await this.$http.post('/api/share', {
      id
    });

    this.setData({
      shareData: data
    });

    return oldValue.apply(this, args);
  };
}

在这个示例中，checkAuthAndShare修饰器被应用到了Page类的onLoad方法上。当页面加载时，onLoad方法会被调用。在onLoad方法中，checkAuthAndShare修饰器首先会检查用户是否已经授权登录。如果用户尚未授权登录，则会跳转到登录页面。否则，将继续执行onLoad方法的原始实现。在onLoad方法的原始实现中，我们将从options中获取分享者的id，并发送给服务器。服务器返回分享数据后，我们将分享数据更新到本地存储。