Taro 开发微信/抖音/... 小程序的时候的登录逻辑

今天总结一下开发小程序的登录的问题

我们经常会看到市面上的一些小程序当点击到一些涉及到用户信息的功能或者页面的时候我们跳转到登录页面当用户登录成功以后再给用户返回到原来浏览的页面，这样的交互是非常好的

这样既可以引导用户很好的登录也可以有很好的交互

如果你是一个前端开发应该能明白我的逻辑今天我们就来实现这个逻辑我把代码贴在下面以后开发微信小程序都可以这样去写

我们准备一个登录页面

代码

复制代码

<template>
  <view class="login-container">
    <div class="main">
      <div class="head">
        <div class="title">欢迎使用抖票票</div>
        <div class="desc">未注册过的抖音号将自动创建账号</div>
      </div>
      <div class="btns" @tap="onDouyinLogin">
        <nut-button
          block
          :disabled="!isAgreeAccord"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          ><div>抖音号登录</div></nut-button
        >
      </div>
      <div class="accord">
        <div class="checkbox">
          <nut-checkbox v-model="isAgreeAccord"></nut-checkbox>
        </div>
        <div class="txt">
          <div class="a">已阅读并同意</div>
          <div class="b" @click="skipUserAgreement">《用户协议》</div>
          <div class="b" @click="skipPrivacyAgreement">《隐私协议》</div>
        </div>
      </div>
    </div>
  </view>
</template>

<script setup lang="ts">
import Taro from "@tarojs/taro";
import { ref, onMounted } from "vue";
import * as loginApi from "../../api/login";
import { storeToRefs } from "pinia";

import { useUserStore } from "../../store";
import { useDidShow } from "@tarojs/taro";
const router = Taro.useRouter();
const userStore = useUserStore();
const { Userinfo, shareUserId } = storeToRefs(userStore);

const isAgreeAccord = ref(false);
const sourceUrl = ref("");
const code = ref("");
onMounted(() => {
  if (router.params.url) {
    sourceUrl.value = decodeURIComponent(router.params.url);
  }
});
useDidShow(() => {
  Taro.login({
    success: async function (res) {
      if (res.code) {
        Taro.showLoading({ title: "加载中", mask: true });
        code.value = res.code;
        Taro.hideLoading();
      } else {
        // Taro.showToast({
        //   title: "获取code失败",
        //   icon: "error",
        //   duration: 2000,
        // });
      }
    },
  });
});
const onDouyinLogin = async () => {
  try {
    Taro.showLoading({ title: "登录中...", mask: true });
    const userRes = await Taro.getUserProfile({ desc: "获取用户信息" });
    console.log(userRes, "----");
    // return;,

    let loginRes = await loginApi
      .dyLogin(code.value, userRes.userInfo, shareUserId.value)
      .catch((error) => {
        console.log(error);

        Taro.showToast({
          title: error.errMsg,
          icon: "error",
          duration: 2000,
        });
      });
    if (loginRes) {
      userStore.setToken(loginRes["token"]);
      userStore.getUserinfo();
      // 跳转至原url
      toSourceUrl();
    } else {
      Taro.showToast({
        title: "获取code失败",
        icon: "error",
        duration: 2000,
      });
    }
    Taro.hideLoading();

    // Taro.login({
    //   success: async function (res) {
    //     if (res.code) {
    //       Taro.showLoading({ title: "加载中", mask: true });
    //       const userRes = await Taro.getUserProfile({ desc: "获取用户信息" });
    //       console.log(userRes, "---------------");

    //       let loginRes = await loginApi
    //         .dyLogin(res.code, userInfo)
    //         .catch((error) => {
    //           Taro.showToast({
    //             title: error.errMsg,
    //             icon: "error",
    //             duration: 2000,
    //           });
    //         });
    //       // 如果登录成功
    //       if (loginRes) {
    //         userStore.setToken(loginRes["token"]);
    //         userStore.getUserinfo();
    //         // 跳转至原url
    //         toSourceUrl();
    //       }
    //       Taro.hideLoading();
    //     } else {
    //       Taro.showToast({
    //         title: "获取code失败",
    //         icon: "error",
    //         duration: 2000,
    //       });
    //     }
    //   },
    // });
  } catch (error) {
    console.log(error);

    Taro.showToast({
      title: "拒绝授权",
      icon: "error",
      duration: 2000,
    });
    return error;
  }
};
const toSourceUrl = () => {
  const url = sourceUrl.value;
  if (!url) {
    Taro.navigateBack();
    return;
  }
  const tabbarPageList = [
    "/pages/home/index",
    "/pages/cinema/index",
    "/pages/order/index",
    "/pages/my/index",
  ];
  if (tabbarPageList.includes(url)) {
    Taro.switchTab({
      url: sourceUrl.value,
    });
  } else {
    Taro.redirectTo({
      url: sourceUrl.value,
    });
  }
};
const skipUserAgreement = () => {
  Taro.navigateTo({
    url: "/pages/user-agreement/index",
  });
};
const skipPrivacyAgreement = () => {
  Taro.navigateTo({
    url: "/pages/privacy-agreement/index",
  });
};
</script>

<style lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  padding: 5rem 0;
  .main {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    .head {
      display: flex;
      flex-direction: column;
      text-align: center;
      .title {
        font-size: 0.8rem;
        color: #15181d;
        font-weight: 500;
        line-height: 1.6rem;
      }
      .desc {
        font-size: 0.6rem;
        line-height: 1.2rem;
        color: #858a99;
      }
      margin-bottom: 1.5rem;
    }
    .btns {
      .nut-button {
        border: none !important;
      }
    }
    .accord {
      display: flex;
      flex-direction: row;
      height: 1rem;
      margin-top: 1.5rem;
      align-items: center;
      justify-content: center;
      .checkbox {
        width: 1rem;
      }
      .txt {
        display: flex;
        flex-direction: row;
        .a {
          font-size: 0.6rem;
          color: #858a99;
        }
        .b {
          font-size: 0.6rem;
          margin: 0 0.2rem;
          color: #ee0a24;
        }
      }
    }
  }
}
</style>

最重要的代码是其中的一个方法

复制代码

const toSourceUrl = () => {
  const url = sourceUrl.value;
  if (!url) {
    Taro.navigateBack();
    return;
  }
  const tabbarPageList = [
    "/pages/home/index",
    "/pages/cinema/index",
    "/pages/order/index",
    "/pages/my/index",
  ];
  if (tabbarPageList.includes(url)) {
    Taro.switchTab({
      url: sourceUrl.value,
    });
  } else {
    Taro.redirectTo({
      url: sourceUrl.value,
    });
  }
};

这个方法就是跳转到用户浏览的页面当然这个页面需要传到登录页面

因为这是一个统一的判断功能所以我们可以使用 vue 中的 mixin 方式

我来写一个js文件

这个文件其实就是导出了一个对象是一个 onShow 生命周期函数里面判断了 token 当然可以用别的来判断是否登录

以上就是准备的方法

我们需要在那个页面中登录就把这个mixin 使用到哪里

我来举个例子

个人中心页面需要用户登录

我就在这个页面中引入这个方法

使用mixins 点击这个页面没有token 就会跳转到登录页面登录成功了就会返回个人中心页面

其实这个没啥难得一个很巧妙得登录方式和判断方式而已

只要页面需要登录把上述代码复制一份就可以