vue微信公众号授权开发流程
项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号。
1、注册公众号,这个不多说了
2、配置公众号
在【公众号设置】-【功能设置】-配置JS接口安全域名和网页授权域名;
其中网页授权域名用于授权回调。
3、授权流程
(1)在author页面, 先判断是否有token,如果有则直接进入首页(如果接口返回了401,则说明token失效,清除缓存token,跳转到授权页面)。
(2)如果没有token,则需要查看是否有code,如果有code说明已经授权,拿着code当参数,通过后端接口获取token和appid。
(3)如果没有code,首先wx.config 初始化,成功后进入授权,授权成功重新进入本页面则可以获取code,通过后端接口获取token和appid,本地存储后,进入首页。
4、在auth.vue页面中的代码
<script>
export default {
data(){
return {
}
},
created() {
// 检测是否登录 是否存在token
let token_access = localStorage.getItem('token_access')
if(!token_access){
this.getTokenByCode();
}else{
this.$router.push(this.$store.state.toFullPath)
}
},
methods: {
getTokenByCode() {
let self = this;
self.code = self.getUrlParam('code');
if(!self.code){
self.$toast.loading('登录中...')
self.$mixin.methods.getWxConfig('auth',()=>{
self.goAuth()
})
}else{