微信网页授权，解决REDIRECT_URL携带#号，微信返回时临时code等参数拼接在URL中间，而不是最后面

微信授权获取临时code的URLhttps://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=012#wechat_redirect授权逻辑代码通过wind

云南吴小黑

5894人浏览 · 2022-04-12 09:30:57

云南吴小黑 · 2022-04-12 09:30:57 发布

微信授权获取临时code的URL

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=012#wechat_redirect

授权逻辑代码
通过window.history.pushState({}, 0, jumpURL)解决问题=，其中jumpURL为授权界面的URL

const h5AppId = '*******************************';
this.loginParamsH5.appId = h5AppId;

//解析URL的参数，获取临时code
let paramsObj = this.$mHelper.getURLParams(window.location.search);
console.log('当前地址的URL参数=====>', paramsObj);

// 应用的授权界面的URL，携带#号
const jumpURL = 'http://*******/mpshop#/pages/public/wechat-auth';
if (!paramsObj.code) {
	//code作为换取access_token的票据，code只能使用一次，5分钟未被使用自动过期
	const redirectUrl = this.$mConstDataConfig.oauth2URL.replace("APPID", h5AppId).replace("REDIRECT_URI", encodeURIComponent(jumpURL));
	
	//重定向回来，这里需要处理一下URL的参数
	//微信重定向回来的URL：http://*******?code=****&state=***/mpshop#/pages/public/wechat-auth
	//需要修改得到的的URL：http://*******/mpshop#/pages/public/wechat-auth?code=****&state=***
	window.location.href = redirectUrl;
} else {
	this.loginParamsH5.code = paramsObj.code;
	this.loginParamsH5.state = paramsObj.state || '012';
	//下面通过window.history.pushState解决问题
	//const _url = `${window.location.protocol}//${window.location.host}/mpshop#/pages/public/wechat-auth`;
	window.history.pushState({}, 0, jumpURL);
}