vue微信微信网页授权
官方文档 测试平台
文章目录
vue微信微信网页授权vue代码URL流程图
vue代码
router.beforeEach((to, from, next) => {
let locationUrl = window.location.href;
let openid = window.localStorage.getItem("openid"); // 从内存取得openid
if (!openid) { // 内存内没有openid
// 检测是否参数内有code，若有则跳接口获取openid，若没有则跳授权页
if (locationUrl.indexOf("code") >= 0) { // 链接里有code
axios.get(" ****** url ****** ", { params: {
code: getval(locationUrl, 'code'),
state: getval(locationUrl, 'state')
}}).then((res) => {
if (res.data.rel) {
window.localStorage.setItem("openid", res.data.result.openid);
window.localStorage.setItem("nickname", res.data.result.nickName);
window.localStorage.setItem("userheadimg", res.data.result.userHeadimg);
window.localStorage.setItem("amount", res.data.result.amount);
// 存入vuex相关登陆信息
store.commit('setUserMsg', res.data.result);
store.commit('setOpenId', res.data.result.openid);
} else {
console.log('登陆失败' + res.data.msg);
}
}).catch((err) => {
console.error('登陆失败' + err);
})
} else { // 链接里没有code
let redirectHref = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
+ appid
+ '&redirect_uri='
+ encodeURIComponent(locationUrl)
+ '&response_type=code&scope=snsapi_userinfo&state='
+ state
+'#wechat_redirect';
window.location.href = redirectHref; // 跳转微信链接获取code和state（state没啥用目前暂时）
}
} else { // 内存里有openid
let member = {};
member.nickName = window.localStorage.getItem("nickName");
member.userHeadimg = window.localStorage.getItem("userHeadimg");
member.amount = window.localStorage.getItem("amount");
store.commit('setUserMsg', member);
}
}
//从url中获取参数值
function getval(url, name) {
var reg = new RegExp("(^|\\?|&)"+ name +"=([^&|#]*)(\\s|&|#|$)", "i"); // 因为vue有添加“#”的特点，所以这里的正则表达式会匹配 & -- &/#
if (reg.test(url)) return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
};
URL
这里的url必须是全面encode的状态：encodeURIComponent(currentPageUrl)，不需要像微信JSSDK一样location.split('#')[0]
流程图
visio下载太慢了,手绘了一张,凑合看吧:
手绘什么的太恶心了，补上一张processon大赞的流程图在线制作网站生成的：
