vue实现微信授权登录

mounted() {
    var WXInfo = localStorage.getItem('WXInfo') ? JSON.parse(localStorage.getItem('WXInfo')) : 'noLogin'
    let str = window.location.href
    var ua = navigator.userAgent.toLowerCase()
    var isWeixin = ua.indexOf('micromessenger') !== -1 // 是否 在微信浏览   器内
    let isURL = window.location.href.indexOf('code=') === -1 // 是否 没有授权重定向回来

    console.log("参数1：", str, ua, isWeixin, isURL)
    if (isWeixin && isURL) {
        this.getLogin()
    } else {
        console.log("没有执行")
    }
    // 重定向回来
    if (!isURL) {
        let num1 = str.indexOf('code=')
        let num2 = str.indexOf('&state=')
        this.wxcode = str.slice(num1 + 5, num2)
        localStorage.setItem('WXcode', JSON.stringify(this.wxcode))

        // this.$message({
        //     showClose: true,
        //     message: "重定向回来：" + JSON.stringify(this.WXcode)
        // });
        console.log("wxcode:", JSON.stringify(this.WXcode))
    }
},

 关键方法：
methods: {
  getLogin() {
        let urlrouter = window.location.href.split('#/')[1] // 当前路由
        //hostName是后台服务器域名
        //url 是当前页面的地址。
        //appId 是公众号appid（注意：确定后台提供的appid和相关的token是同一个公众号的）

        let url = this.$api.hostName + 'nakAppServer/ncpReport' // 重定向返回地址
        let str = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.$api.wxAppId + '&redirect_uri=' + url + '/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'

        console.log("微信授权连接：", str)
        window.location.href = str
    },
    }

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。