【前端】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);
版 权 声 明