【前端】2024年 前端Base64编码的中文处理问题

window.btoa() 遇到中文要出问题

localStorage.setItem("token",window.btoa(unescape(encodeURIComponent(UDATA["uid"]+"#START_AC#"+UDATA["uaccount"]+"#END_AC#"+"#START_TIME#"+time+"#END_TIME#"+"#START_SF#"+UDATA['usf']+"#END_SF#"))))

由于unescape过时了 就换一种写法，如下（下方的写法需要浏览器支持）

编码

const onFinish = values => {
  console.log("values", values)
  user_login(formState).then((res) => {
    let code = res["code"]
    let msg = res["message"]
    notification.open({
      message: '通知',
      description: msg,
      icon: () =>
          h(SmileOutlined, {
            style: 'color: #108ee9',
          }),
    });
    if (code === 1) {

      console.log(res["data"])
      let UDATA = res["data"]

      //账号状态判断
      if (UDATA["status"] !== "正常") {
        notification.open({
          message: '通知',
          description: "账号异常，已被停止使用，请联系管理员重试",
          icon: () =>
              h(SmileOutlined, {
                style: 'color: #108ee9',
              }),
        });
        return
      }

      let time = parseInt(new Date().getTime() / 1000) + ''
      localStorage.setItem("username", UDATA["uname"])
      localStorage.setItem("account", UDATA["uaccount"])
      // 拼接字符串
      let dataString = UDATA["uid"] + "#START_AC#" + UDATA["uaccount"] + "#END_AC#" +
          "#START_TIME#" + time + "#END_TIME#" +
          "#START_SF#" + UDATA['usf'] + "#END_SF#";

// 使用 TextEncoder 进行 UTF-8 编码
      const encoder = new TextEncoder();
      const dataUint8Array = encoder.encode(dataString);

// 将 Uint8Array 转换为 Base64
      localStorage.setItem("token", btoa(Array.from(dataUint8Array, byte => String.fromCharCode(byte)).join('')));
      router.push("/index")
    }
  })
};

关键代码

// 拼接字符串
      let dataString = UDATA["uid"] + "#START_AC#" + UDATA["uaccount"] + "#END_AC#" +
          "#START_TIME#" + time + "#END_TIME#" +
          "#START_SF#" + UDATA['usf'] + "#END_SF#";

// 使用 TextEncoder 进行 UTF-8 编码
      const encoder = new TextEncoder();
      const dataUint8Array = encoder.encode(dataString);

// 将 Uint8Array 转换为 Base64
      localStorage.setItem("token", btoa(Array.from(dataUint8Array, byte => String.fromCharCode(byte)).join('')));

解码

onMounted(() => {
  // 从本地存储获取 token
  // 从 localStorage 中获取 Base64 编码的字符串
  const token = localStorage.getItem("token");

  if (token) {
    try {
      // 解码 base64 格式的 token

// 使用 atob 函数将 Base64 字符串解码为二进制数据表示的字符串
      const binaryString = atob(token);

// 将二进制字符串转换回 Uint8Array
      const dataUint8Array = Uint8Array.from(Array.from(binaryString, char => char.charCodeAt(0)));

// 使用 TextDecoder 将 Uint8Array 解码回原始的 UTF-8 字符串
      const decoder = new TextDecoder('utf-8');
      const decodedString = decoder.decode(dataUint8Array);

// 现在 decodedString 包含了原始的 dataString
      console.log(decodedString);
      let decodedToken = decodedString

      // 提取并验证 token 中的各个部分
      const tokenParts = decodedToken.split("#START_TIME#")[1].split("#END_TIME#")[0];
      const timestamp = parseInt(tokenParts, 10); // 总是指定 radix 为 10，避免潜在的安全问题

      const tokenSF = decodedToken.split("#START_SF#")[1].split("#END_SF#")[0];
      console.log("身份", tokenSF);

      // 检查 token 是否过期（以7天为期限）
      const sevenDaysInSeconds = 7 * 24 * 60 * 60;
      const currentTimestamp = parseInt(new Date().getTime() / 1000, 10);

      if ((currentTimestamp - timestamp) < sevenDaysInSeconds) {
        console.log("自动登录！欢迎回来~");
        // 这里可以继续进行其他自动登录后的操作
      } else {
        // 登录已过期，显示通知并跳转到登录页面
        notification.open({
          message: '通知',
          description: "登录已过期，请重新登录。",
          icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
        });
        localStorage.removeItem("token"); // 清除过期的 token
        router.push("/login");
      }
    } catch (error) {
      console.error("Error decoding token:", error);
      // 处理错误：清除无效的 token 并跳转到登录页面
      localStorage.removeItem("token");
      router.push("/login");
    }
  } else {
    // 如果没有 token，直接跳转到登录页面
    router.push("/login");
  }
});

关键代码

// 使用 atob 函数将 Base64 字符串解码为二进制数据表示的字符串
      const binaryString = atob(token);

// 将二进制字符串转换回 Uint8Array
      const dataUint8Array = Uint8Array.from(Array.from(binaryString, char => char.charCodeAt(0)));

// 使用 TextDecoder 将 Uint8Array 解码回原始的 UTF-8 字符串
      const decoder = new TextDecoder('utf-8');
      const decodedString = decoder.decode(dataUint8Array);

// 现在 decodedString 包含了原始的 dataString
      console.log(decodedString);