VUE 前后端分离----微信授权登陆

在做这个功能之前，查看了网上的一些博客，大多数人的难点就是如何重定向，如何在前台获取code!!!

回想一下以前前后端不分离的时候，后台使用redirect来重定向到另一个action。通过request来获取code，拿到code了，来换取openid，拿到openid了就可以获取更多的信息。

现在需要解决的就是，前台如何获取这个code值！

思路：
[1]设置一个空页面weixin_auth.vue，也就是需要重定向的页面，这里是直接重定向到页面的！！！ 很重要！！！ 这里的代码是写在了空页面的前一个页面，不要误会了，只是为了示范。用了两个页面，
点击登陆---重定向-->空白页面weixin_auth.vue
    weixinAuth: function() {
      //微信回调直接跳到vue前端页面来
      //回调之后的地址变成了： 
      //http://zlw.ngrok.zhoulw.cn:8080/weixin_authcode=34CdafdsafEdfefwfc&state=a123
      let redirectUrl = "http://zlw.ngrok.zhoulw.cn:8080/weixin_auth";
      let params = {
        'redirectUrl': redirectUrl
      }
      //调用后台地址转换的方法：location.href先跳转到微信，然后才会跳转到自己定义的回调页面
      this.$fetch('/getRedirectUrl', params).then((response) => {
        location.href = response.redirectUrl;
      });
    }
[2]跳转到weixin_auth页面来的时候，这时页面的地址后面自动添加上了code，所以我们只需要把这个code拿到即可。
methods: {
     // 这个是为了获取地址里面的参数
     getUrlParam: function(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");　　　　　　//构造一个含有目标参数的正则表达式对象
      let arr = window.location.search.substr(1).match(reg);　　　　　　　 //匹配目标参数
      if (arr) {
        return decodeURIComponent(arr[2]); 
      } 
      return null;　
    },
    getPersonInfo: function() {
      let params = {
        'code': this.getUrlParam('code')
      };
      // 调用后台方法：code换openid， openid换人员信息
      this.$fetch('/getPersonInfo', params).then((response) => {
          // 获取返回信息
      })
    }
  }

整个思路并不难，难的是如何规避以前的老思路，后台重定向！！！ 其实是可以直接重定向到页面的，经过微信服务器的重定向到vue页面，它会自动把code添加的你设置的重定向的地址后面。

如我设置的重定向vue页面为：http://zlw.ngrok.zhoulw.cn:8080/weixin_auth

进过微信服务器重定向的vue页面地址为：http://zlw.ngrok.zhoulw.cn:8080/weixin_auth?code=34CdafdsafEdfefwfc&state=a123

页面还是你规定的那个页面，只不过后面多了几个参数，通过上面的getUrlParam方法可以获取地址里面的参数code，拿到code想必都知道怎么做了吧