Taro跨端开发探索5——用户状态记录

掘金第一IKUN
510 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。

前言

在第十天的更文活动中，我们完成了同一个项目，访问不同后端接口的实现，现在我们要处理的是记录当前用户的信息用来记录用户的浏览记录和请求个人的购物车和订单等信息,这时就需要浏览器缓存来处理了。

登录绕不开的话题—code获取

熟悉公众号或者小程序开发的同学都知道，我们在对接登录的第一件事就是需要获取微信的code。大家有没有好奇为什么需要这么做？我简单解释一下，微信的code在它官方的文档上称为临时登录凭证code,我们在获取到code之后，就可以调用微信的auth.code2Session接口来换取微信的openId等信息。

  • openId的作用
  1. 假如大家的业务涉及到支付，必须要使用微信用户的openId
  2. 关联当前用户：我们在清理微信内存或者换手机的时候，存储在微信浏览器缓存中的当前用户信息会删除掉，此时如果让用户重新登录无疑是一件非常呆的事情。我们这时候就可以将openId和用户对应起来（如果你是多租户平台的话，设置对应的租户id进行分表处理），在需要调用token的地方如果没有token的话先走使用code登录的方法，如果有用户就返回登录成功，没有用户就创建用户返回登录成功
    taro中获取code十分简单,如下调用即可
    Taro.login({
      success: function (res) {
        if (res.code) {
        } else {
          console.log("登录失败！" + res.errMsg);
        }
      },
    });

我们先在后端接口中返回token+获取到的code作为我们对应的token，大家如果有自己的成熟后端接口，修改一下即可。
注意 可能有的项目使用的是oauth模式的授权，需要把授权和登录分开，这一步只需要获取token即可

存储token、用户信息

我们在后端接口中获取到了token和用户信息，现在把他们存储在浏览器缓存中
taro存储缓存的方法和store的差不多，对应的api是Taro.setStorage(option),单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。\

在【我的】页面实现基本功能

我们现在针对【我的】页面需求进行分析

  • step1 查询用户的基本信息（从浏览器中查询）
  • step1.1 查询到的话就在【我的】页面渲染用户信息
  • step1.2 未查询到就使用code进行登录，返回当前人的信息，再次调用step1.1

实现功能

我们将user/index.ts修改为以下代码

import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import { loginByCode } from "../../utils/api/user";
export default function User() {
  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    console.log("user", userInfo);
    const userStorage = Taro.getStorageSync("userInfo");
    if (userStorage) {
      setUserInfo(userStorage);
    } else {
    }
    Taro.login({
      success: (res) => {
        loginByCode(res.code).then((res) => {
          console.log(res.data.data);
          Taro.setStorageSync("userInfo", res.data.data['user']);
          setUserInfo(res.data.data['user']);
        });
      },
    });
  }, []);
  return (
    <View>
      <Text>{userInfo?userInfo["name"]:'暂无'}</Text>
    </View>
  );
}

loginByCode代码

export const loginByCode = (code) =>
  post(`${homeReqUrl}/auth/login?code=${code}`, null);

最终，我们可以看到user页面入口会显示当前人的名称

结语

本文我们处理了用户信息存储至浏览器缓存，我们在开发的时候发现需要获取后端data数据的时候需要通过res.data.data获取，明天我们优化一下。

avatar
文章
阅读
粉丝