Vue项目中实现网页授权

       今天突然要做微信公众号项目，第一次接触就要做一个 微信网页授权 的功能，看文档看了半天，懵逼的进去懵逼的出来，后来找度娘，看各种博客，终于明白了一些，然后知道了微信网页授权分两种，第一种是snsapi_base（静默授权，用户无感知），第二种是snsapi_userinfo（第一次授权需要用户点击登录确认）。静默授权只需要两步就能拿到开发者需要的openID，而第二种授权方式，一共需要四步，可以拉取到用户信息（昵称、头像等）。

       本人愚昧，到目前为止，我只做到了前两步，附上代码

<template>
<div></div>
</template>

<script>
import $ from "jquery"
export default {
name: "testDemo",
data(){
return{

}
},
methods:{
getCode(){
//    snsapi_base  snsapi_userinfo 第一步用户授权，跳转目标页，在下一页得到code
var AppId = "wxd26bda82d18b5926";//公众号的唯一标识,开发者ID
var redirect_urls= encodeURIComponent("http://www.shapeui.com");
var urls =  "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+AppId+"&redirect_uri="+redirect_urls+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
window.location.href = urls;

console.log(window.location.href)
},
getQueryString(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}else {
return null;
}
},
GetCodeDemo(){
var code = this.getQueryString('code')
console.log(code)
if(code != null){
var parameters = {};
parameters.appid = "wxd26bda82d18b5926";
parameters.secret = "f48c3c9dcf342904ef41941c0be75071";
parameters.code = code;
parameters.grant_type="authorization_code"
$.ajax({
type: 'POST',
data:parameters,
url:"http://weixin3.szfangle.com/wxapp/mobileApi/submitWxcode.fgl?",
success: function(res){
console.log(res)

},error:function(res){
console.log(res)
}
});
}
}
},
created(){
this.getCode();
this.GetCodeDemo();
}
}
</script>

<style scoped>

</style>

效果图