vue2.x 微信公众号授权拿取code,静默登录
1.前提是微信公众号后台已经配置了 业务域名地址和网络授权地址
2.例如在首页授权登录,在当前页面引入对应的js
import { isWXBrowser, getWechatCode } from "@/utils/common";
3.common.js
// 判断是否微信环境
export const isWXBrowser = (() => {
const ua = window.navigator.userAgent.toLowerCase()
return /(micromessenger|webbrowser)/g.test(ua)
})()
import axios from 'axios'
// 判断是否为微信环境
const isWechat = () => {
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
export const getUrlCode = () => {
// 截取url中的code方法
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
return theRequest;
}
export const getWechatCode = () => {
if (isWechat) {
let appid = "微信APPid "; //微信APPid
let code = getUrlCode().code; //是否存在code
let local = window.location.href;
// let local = 'https://********';
if (code == null || code === "") {
//不存在就打开上面的地址进行授权
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +
"&redirect_uri=" +
encodeURIComponent(local) +
"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
} else {
localStorage.code = code
// 拿到code之后就要范湖给后台 让后台返回对应的account_token和openid,尽量使用account_token 这个的刷新时间是两个小时,openid暴露出来不太好,拿到token之后就处理相关的业务逻辑
}
}
// })
};
4.使用
created() {
if (isWXBrowser) {
getWechatCode();
}
},