详解Vue微信公众号开发踩坑全记录
5星 · 超过95%的资源 200 浏览量
2020-08-29
15:54:52
上传
评论 1
收藏 150KB PDF 举报 
详解详解Vue微信公众号开发踩坑全记录微信公众号开发踩坑全记录
本篇文章主要介绍了详解Vue微信公众号开发踩坑全记录，小编觉得挺不错的，现在分享给大家，也给大家做个
参考。一起跟随小编过来看看吧
本文介绍了Vue微信公众号开发踩坑全记录，分享给大家，也给自己留个笔记。
需求需求
微信授权登录（基于公众号的登录方案）
接入JS-SDK实现图片上传，分享等功能
现状及难点现状及难点
采用的Vue框架，前后端分离模式（vue工程仅作为客户端），用户通过域名访问的是客户端，但是微信授权中涉及签名
和token校验依赖服务端
JS-SDK需要向服务端获取签名，且获取签名中需要的参数包括所在页面的url，但由于单页应用的路由特殊，其中涉及
到IOS和android微信客户端浏览器内核的差异性导致的兼容问题
解决方案解决方案
授权登录授权登录
授权流程如下：
详细说明：详细说明：
1. 用户访问网站主域名
2. vue客户端(domain/)接收请求，在路由解析前判断用户是否登录（比如检查cookie）；
3. 如果没有登录，则通过api获取微信授权地址，获取后跳转到微信服务端授权页面；
4. 用户确认授权，微信服务器发起回调请求，这时需要回调到服务器端（domain/api/xxx）
5. 服务器端保存用户信息，进行注册登录操作（记录cookie），重定向到vue客户端（domain/）
6. 重复第一步，授权登录成功
踩坑记录：
以下是一个错误授权方案
资源评论
自带清欢2022-07-22可以放心用，多谢！！
