url带#号，微信授权，微信分享那些坑

时间：2024-02-29 19:32:32

微信授权的方法是，在项目里面配置拦截器（此处可以参考各个框架的拦截器）没有拦截器也可以，反正意思就是跳转到项目里的时候判断微信环境

如果是微信环境，

判断微信环境的方法是

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == \'micromessenger\') {

// 微信环境

}

此时处于没有登陆的状态或者需要微信授权的状态跳转微信授权链接

var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == \'micromessenger\') {

// 微信环境

var redirect_uri = window.location.protocol + \'//\' + window.location.host + \'/\';
var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WECHAT_APP_ID + "&redirect_uri=" + encodeURIComponent(redirect_uri, "UTF-8") + "&response_type=code&scope=snsapi_base&state=10#wechat_redirect"
window.location.href = url;

}

 appid 是自己微信公众号的appid，redirect_uri是授权跳转的url，这个域名也要在微信公众号的后台配置授权安全域名，

比如redirect_uri是 http://www.eeeee.com/#/home,授权回来的url微信会带code，此处code是授权成功给的唯一识别码（用户后台查询用户openid）

此时URL是 http://www.eeeee.com/?code=3333333333#/home,因为前端框架的原因，之后页面跳转url只会改变＃号后面的值，此处藏了很多坑，比如不能后面又加了code的参数，就会混淆，如http://www.eeeee.com/?code=3333333333#/home?code=44，微信分享也会遇到一些坑

我的一个解决方案是：

授权回来之后，无刷新改变url

var _url = window.location.protocol + \'//\' + window.location.host + \'/#/home;
window.history.pushState({},0, _url)

这样url又变回授权前的样子（要在用过code之后）

目前感觉还是很好用的

 

相关文章