hash模式进行微信code授权,返回的路径会变成
http://localhost:8080/?code=**********&state=123#/login
正常的history模式是
http://localhost:8080/login?code=**********&state=123
处理方法
对路由进行拼接,因为如果不做拼接。
1-接口请求报错Content-Type跨域; 2-页面跳转出问题,因为hash模式是通过#号识别的
created() {
// 判断微信授权回来
console.log("route", this.$route.query);
let url = window.location.href;
if (url.indexOf("code") != -1) {
if (url.substr(-7) == "#/login") {
let url1Index = url.indexOf("?");
let url1 = url.substring(0, url1Index);
let url2 = url.substring(url1Index, url.length - 7);
let url3 = url.substr(-7);
let urlAll = url1.concat(url3, url2);
window.location.href = urlAll;
} else {
this.state = this.$route.query.state;
let code = this.$route.query.code;
}
}
},
如果不对url重新拼接获取参数也是可以的。
额,我不晓得什么情况下会不做拼接,大概有的吧,
// 获取state
let stateIndex = url.indexOf("state");
let state = url.substring(stateIndex + 6, url.indexOf("#"));
// 获取code
let codeIndex = url.indexOf("code");
let code = url.substring(codeIndex + 5, url.indexOf("&"));
微信授权
appid要改成自己的,redirect_uri要在公众号配置域名,如果是hash模式需要用encodeURIComponent处理#号,state是返回是携带的参数
redirectToWxUrl() {
let redirect_uri = encodeURIComponent(
`${process.env.VUE_APP_URL}/#/login`
);
// let scope = "snsapi_base" //静默授权 - 未关注获取不到用户信息
let scope = "snsapi_userinfo"; // 未关注弹框授权 已关注静默授权
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx228b25db23e7a878&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${this.userPhone}#wechat_redirect`;
}