iOS端解码base64加密数据 时失败(含解决办法)

1,405 阅读2分钟

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

之前遇到个问题,是 IOS 用户base64解码失败。

问题描述:

用户淘宝授权,淘宝给的授权信息经后端 base64 加密之后拼在url中返回给前端,前端通过url取值,然后使用base64解码获取数据,进而绑定商品。但是有且仅有一个用户,账号一直绑定不上,其他用户均没问题。

前端使用vue开发,核心代码如下:

import { Base64 } from 'js-base64';

...
created() {
    const code = this.$route.query.code;
    
    if (res) {
        try {
            this.code = JSON.parse(Base64.decode(code));
        }
    }

}
...

因为问题用户仅有一例,本身并没有怀疑是代码的问题,猜测跟该用户授权相关,后经过大量埋点数据 及 抓包测试,发现是:

返回的加密码,在前端 this.$route.query 获取时,base64加密时尾部补全的“=”没有取全,导致decode时失败,解密为空值。

参考: iOS base64解码问题记录

解决办法:

后端base64 加密之后,再 encodeURI 一下,前端取值时,先 decodeURI,再进行base64解码及 JSON.parse反序列化,核心代码如下:

import { Base64 } from 'js-base64';

...
created() {
    const code = this.$route.query.code;
    
    if (res) {
        try {
            let decodeUrl = decodeURI(code); // decodeURI 可避免丢失及转译
            this.code = JSON.parse(Base64.decode(decodeUrl));
        }
    }

}

注:这种url传值在安卓和ios都会失败

总结: 因为只有一个用户出问题,其他人均正常,一开始也没往代码问题上想。神策埋点上报因长度限制,上报数据没添加完全,只看到能获取url中的加密码,开始也没留意是丢值了,最后后端同事提示,才想到这种可能,得以优化。最开始一直以为是用户授权问题,返回的授权信息有什么特殊性导致失败,尴尬的是,后来该用户又申请了一个账号,结果还是授权不成功,才意识到不是偶发性。害,bug还有很多,唯有努力学习啊!