一、开发准备
1.申请的微信公众号且选择类型为服务号，因为只有服务号才可以进行一下步骤；
2.需要通过备案的域名，后面在网页授权域名配置中会用到，当然在前端访问域名也是必须的；
二、微信授权整体逻辑
1.参考微信官方文档
2.设计思路：前端授权获取code --->上传给后台 ---> 后台通过code 调用微信后台换取access_token和使用scope为snsapi_userinfo的方式 获取到用户openid和基本信息 ---> 返回到前端---> 将openid作为用户的唯一标识。
三、具体步骤
1.将公众号appid和appSecret交给后台开发同学完成相关配置，在开发---->基本配置；
image.png
2.在公众号页面，设置---> 公众号设置 ---> 功能设置中，设置网页授权回调域名；
image.png
3.前端实现代码；
根据业务功能在具体实现过程中，首先在router路由守卫中判断 本地是否存储用户openid，如果有进入业务页面，如果没有重定向到微信授权页面。
router.beforeEach((to,from,next) => {
let fullPath = to.fullPath
if (to.name === 'Auth') {
next()
return
}
let openId = localStorage.getItem('openId');
if (!openId) {
//保存当前路由地址，授权后还会跳到此地址
sessionStorage.setItem('wxRedirectUrl', fullPath)
//请求微信授权,并跳转到 /auth 路由
let appId = '公众号appid'
let redirectUrl = encodeURIComponent('正式环境授权页面路径')
//判断是否为正式环境
if (window.location.origin.indexOf('正式环境域名') !== -1) {
redirectUrl = encodeURIComponent('正式环境授权页面路径')
} else {
redirectUrl = encodeURIComponent('测试环境授权页面路径')
}
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize? appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect&connect_redirect=1`
} else {
next()
}
})
在页面目录中创建一个auth.vue授权空页面；
<template>
<div></div>
</template>
<script>
export default {
name: "Auth",
async created() {
// 如果连接中有微信返回的 code，则用此 code 调用后端接口，向微信服务器请求用户信息
if (this.$route.query.code) {
try {
let redirectUrl = sessionStorage.getItem("wxRedirectUrl");
let res = await this.$api.getWxUserInfo({
wxCode: this.$route.query.code
});
if (res.data.code == 200) {
//将一些信息存储到本地
const token = res.headers['accesstoken']
localStorage.setItem('token', token)
localStorage.setItem("wxUserInfo", JSON.stringify(res.data.root));
localStorage.setItem("openId", res.data.root.openId);
}
this.$router.replace(redirectUrl);//跳转到业务页面
} catch (error) {
console.log(error);
}
} else {
// 如果不是从微信重定向过来的，没有带着微信的 code，则直接进入首页
this.$router.replace("/");
}
}
};
</script>
<style lang="scss" scoped>
</style>
不同的业务实现的方式可能不同，可根据自己具体业务逻辑加以调整。
