Vue project to do WeChat web page authorization

Go directly to the topic

Document address: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

The webpage authorization has not been completed yet, but the problem has been encountered, so as to record the problem and the solution

What I know at the moment is that I need to get a code,

The first step of WeChat web authorization requires users to agree to web authorization

widow.location.href=https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_re

After the service number obtains the advanced interface, it has snsapi_base and snsapi_userinfo in the scope parameter by default

snsapi_base: Silently obtain user information (no user consent required) can only obtain openid

snsapi_userinfo: user consent is required (a new page pops up and the user clicks agree), in addition to the openid, you can also obtain the user name and avatar

I use silent acquisition here: (provided that it is in WeChat environment)

var url=encodeURIComponent(window.location.href);
var getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'appid'}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
window.location.href = getCodeUrl;

After performing the above operation, WeChat will jump to a new page, there will be code parameters on the address of this page

http://www.xxx.cn/param1/?code=xxxaxxxyPDFw1DAzxxx0EsxxxiSZ&state=1#/query1/1

The code value at this address is the code we want

But my original page address is like this:

http://www.xxx.cn/param1/#/query1/1

WeChat confuses the parameters after the # sign (the position is wrong, this is serious in the vue project, because the vue project takes the parameters after the # sign as a route, and now the route returned by WeChat is messy, there will definitely be problems)

 What I want WeChat to return is this URI address:

http://www.xxx.cn/param1/#/query1/1?code=xxxaxxxyPDFw1DAzxxx0EsxxxiSZ&state=1

 

 

 

 

 

。