萌新前端，微信公众号授权登录

       时间飞逝，转眼已经2021年了。今天是2021年的第一个周四，漫天飞雪，肯定是幸运的一天并一年！呐，俗话不都是说，瑞雪兆丰年嘛，今年是我的年，肯定会多眷顾我的，一定！

      废话不多说，先开始我的总结吧。今年一整年差不多都在写微信公众号和小程序，遇到很多坑也有很多想法。

      先说微信公众号，坑多些~~~

      微信公众号的授权，必须注意两点，1、网页授权获取用户的基本信息，这里写的授权回调页面域名，必须跟需要回调授权的访问路径一摸一样，必须一摸一样，包括端口，配置了端口访问路径就必须有端口，没配置端口访问路径就不能有端口（测试号可以配置端口 ，正式号只能配置域名）

网页授权获取用户的基本信息

2、JS接口安全域名，这里是配置接口地址，必须配置！！

JS接口安全域名

配置好了之后就可以开始写代码啦~~~

微信公众号授权登录，先重定向

let url = window.location.href; let redirectUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3e2c7a119c33d387&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"; window.location.href = redirectUrl;

这里需要注意的就是拿到的访问地址，需要用encodeURIComponent()重新编码。调用完这个函数之后，就会开始重定向，重定向的地址是微信返回的后面会直接拼接一个code，类似 http://www.baidu.com?code=xxxxxxxxxxxxxxxxxxxxxxx。

const code = location.href.split('?')[1]if (!code) return {}const obj = {}code.split('&').forEach(item => { const arr = item.split('=') obj[arr[0]] = arr[1]})this.code = obj.code;

拿到code，传给后台，换取openId，拿到openId，那么恭喜你登录成功啦~~~~

总结一下，先去微信后台填写网页授权获取用户的基本信息，再填写JS安全域名，然后调微信重定向，最后拿到code传给后台~