微信头像地址失效踩坑记附带解决方案


Posted in Javascript onSeptember 23, 2019

微信头像失效问题说明?

最近工作遇到一个微信头像失效的问题,情况是这样的,我们一个h5页面在微信授权后打开,会存储微信相关昵称和头像信息,不过,我们没有保存图片到自己的服务器,而是仅仅存储微信头像地址,然而过了n多天后,用户在微信修改了自己的头像,这时候,我们的服务是无感知的,又过了n多天,用户去访问我们那个h5页面,发现自己的头像是这样的:

微信头像地址失效踩坑记附带解决方案

用户找到我们,说自己有头像呀,怎么没显示呢?
我们也反问他,是否最近改过头像呢,他说没,不过很早之前改过。

而此时就比较尴尬,用户体验超级不好。

然后我们就去查看官方文档,发现这么说的:

官方文档说明-获取用户个人信息

微信头像地址失效踩坑记附带解决方案

官方也建议自己保存下来处理。

然后我们又去google了一把,看下别人是否也被同样的问题坑过。

微信头像地址失效踩坑记附带解决方案

微信头像地址失效踩坑记附带解决方案

看来好多用户都遇到了,相关问题链接

经常看到还有人的头像时而好时而不好,那是因为

旧的头像链接失效需要一定的时间,从 CDN 节点一个一个失效。你现在访问到的应该是旧的头像链接,每次访问可能到达不同的 CDN 节点,导致时有时无。

那么如何解决这个问题呢?

我们这边也想了好多方案,我们考虑下几个方面,分两个思路

思路1: 自己本地服务保存并CDN,缺点成本有点高

思路2: 有个策略定时更新头像

  • 定期更新下头像链接,不要一直缓存着,比如在 session_key 过期时一起更新下头像链接
  • 后台服务定期检查头像链接是否过期(怎么自动判断是否过期呢,下面会详细说明)
  • 前端根据头像链接判断是否过期,过期重新授权更新头像信息

下面介绍下,怎么判断微信的头像是否过期了,经过研究发现:

正常的微信图片返回的请求信息如下:

微信头像地址失效踩坑记附带解决方案

然而异常的图片地址怎么返回的呢?

微信头像地址失效踩坑记附带解决方案

可以看下异常情况,返回的信息不一样,可以根据X-Info: notexist:-6101 判断或者 X-ErrNo: -6101 关键字

不过还有一个疑问,如果本地存储的话,还会遇到,用户修改头像后,获取的地址可能不是最新的,虽然不会显示一个特别丑陋的头像,这里怎么解决呢,这里需要产品定义个策略,哪些场景需要定期授权,重新更新头像和用户信息等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery图片放大镜功能的实例代码
Mar 26 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 #Javascript
微信小程序使用蓝牙小插件
Sep 23 #Javascript
微信小程序实现蓝牙打印
Sep 23 #Javascript
微信接入之获取用户头像的方法步骤
Sep 23 #Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 #Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 #Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 #Javascript
You might like
PHP安全编程之加密功能
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python编程入门的一些基本知识
2015/05/13 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
浅析python中while循环和for循环
2019/11/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
PHP笔试题
2012/02/22 面试题
求职自荐信格式
2013/12/04 职场文书
质量主管工作职责
2014/09/26 职场文书
求职信格式范文
2015/03/19 职场文书
革命电影观后感
2015/06/18 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL