|
讲下基于vue框架搭建的h5页面进行微信授权登录的主要步骤 一丶在我们项目中要确认一个用户是否登录的凭证是token,也许实际开发中可能用到其他身份认证如cookie,但是应该是大同小异的，首先当我们登录成功就应该存token到对应的store中，然后在axios的全局请求里面统一配置headers,这样每次请求需要身份认证的接口通过携带在请求头的token就能验证用户是否登录。 二丶来到微信授权登录这一步，一开始当用户第一次进入我们h5项目的时候，无论它是进入到我们项目中的哪个路由，所以这里我的微信授权登录步骤就放在vue的main.js中通过全局路由钩子去做这个授权登录的操作。 三丶思路大致是这样的： 1丶一开始判断store中是否有token,有token，直接next()； 2丶没有token,我们就要拿到地址栏中是否有携带参数code,如果没有我们就要构造微信授权页面的url链接，然后通过跳转url回调到我们的h5界面，再通过回调过来的地址中携带的code参数去提取出来，这时候根据code就能去请求微信相关用户信息，这也是最关键的一步，走到这里授权登录就基本走完了；
let appid = ""; //实际公众号appid，这里的appid对应的微信应用一定是绑定当前h5项目所在线上域名，也就是需要在微信开放平台绑定js安全域名
let url ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +"&redirect_uri=" + redirect_uri +"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
let redirect_uri = encodeURIComponent(
微信开放平台绑定js安全域名 + to.fullPath
);
redirect_uri 则是授权成功后即将回调到本h5项目的url,注意：这里的 redirect_uri 格式一定得通过 encodeURIComponent 进行编码
import store from "./store";
import { GetParam } from "@/utils/getParam.js";
router.beforeEach((to, from, next) => {
if(to.path === '/error'){
next()
return
}
var token = store.state.user.token;
let appid = ""; //实际公众号appid，这里的appid对应的微信应用一定是绑定当前h5项目所在线上域名，也就是需要在微信开放平台绑定js安全域名
let redirect_uri = encodeURIComponent(
微信开放平台绑定js安全域名 + to.fullPath
);
console.log(to.path);
if (!token) {
let url =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +"&redirect_uri=" + redirect_uri +"&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
// 以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的.（静默的另一种：对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。）以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
console.log("window.location.href", window.location.href);
let code = GetParam(window.location.href.split("#")[0], "code");
if (!code) {
window.location.href = url;
} else {
code = GetParam(window.location.href, "code");
let data = {
code
};
// 这里则是根据授权登录后回调到当前h5地址，从当前地址导航栏拿取code,根据实际开发的应用场景，比如向我们项目则是调用一个有后台提供的获取微信个人信息的接口，这个接口是后台根据拿取到的code去请求微信官方文档获取个人信息的接口，下面是我根据我实际业务场景编写的，主要是根据code获取个人信息保存。授权登录走到这一步基本就做完了
server.user.getWxUserInfoForWx(data).then(res => {
if (res.success) {
console.log(res.result);
store.commit("user/SET_TONKEN", res.result.token);
store.commit("user/SET_USERINFO", res.result);
server.user.getMsgNumByUser().then(res => {
store.commit("user/setHasLatest", res.result.latest);
});
next();
} else {
if(res.error.code == '3408' || res.error.code == '3415'){
console.log(res.error)
}
else {
window.location.href = url // 如果请求失败继续走重定向去获取code这一步
}
}
});
// next();
}
} else {
next();
}
});
上述获得url特定参数的GetParam.js
export function GetParam(url, code) {
url = url + "";
let regstr = "/(\\?|\\&)" + code + "=([^\\&]+)/";
let reg = eval(regstr);
//eval可以将 regstr字符串转换为 正则表达式
let result = url.match(reg);
if (result && result[2]) {
return result[2];
}
}
export function GetParam(url, code) {
url = url + "";
let regstr = "/(\\?|\\&)" + code + "=([^\\&]+)/";
let reg = eval(regstr);
//eval可以将 regstr字符串转换为 正则表达式
let result = url.match(reg);
if (result && result[2]) {
return result[2];
}
}
完成了这个授权登录回头来看觉得内容也并不多不难，只是一开始楼主作为小白第一次踩坑摸索就会有各种各样的问题，也是没经验造成的，希望记录下来给有需要的人看到少走弯路。 总结：授权登录要注意以下几点： 1丶公众平台一定要绑定相关h5应用的js安全域名； 2丶redirect_uri 格式一定得通过 encodeURIComponent 进行编码； 3丶验证是否跳转到对应h5线上域名一般要打包部署到线上，这个过程也是比较麻烦的。
|