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 就会跳转到登录页面 登录成功了 就会返回个人中心页面

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

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

相关推荐
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠15 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序
前端呆猿1 天前
小程序性能优化全攻略:提升用户体验的关键策略
前端·性能优化·小程序