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

这是我参与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还有很多，唯有努力学习啊！