vue脚手架,微信公众号授权(微信网页授权)

如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

首先我做了一个H5小项目,然后申请公众号,然后在【自定义菜单】中输入想填写的,公众号菜单名称,以及页面地址:

vue脚手架,微信公众号授权(微信网页授权)_第1张图片

然后,我们在我们的前端页面写调用服务器接口,得到授权。当然这里,后端操作的多。前端只需要请求接口即可。

前端应该做什么呢?

首先,在我们的vue架子下,找到路由router文件夹下的index.js,写以下代码:

router.beforeEach(( to, from, next ) => {
  if (to.name != 'auth') {//判断当前是否是新建的auth路由空白页面
    let _token = sessionStorage.getItem('wechataccess_token');
    if (!_token) {//如果没有token,则让它授权
      //保存当前路由地址,授权后还会跳到此地址
      sessionStorage.setItem('beforeUrl', to.fullPath);
      //授权请求,并跳转http://m.water.ui-tech.cn/auth路由页面
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx777aaa1aaaaa7a77&redirect_uri=http%3A%2F%2Fm.water.ui-tech.cn%2Fauth&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
    } else {
      next();
    }
  } else {
    next();
  }
});

然后,新建一个路由空白页面,我起的名字是auth(就是上面所说的:授权请求,并跳转http://m.water.ui-tech.cn/auth路由页面),在auth.js中写入以下代码:

created(){
    if (this.$route.query.code) {//如果连接中能拿到code说明此时access_token没有或者已过期,需要重新获取token
      let obj = {};
      var url = 'http://api......' + this.$route.query.code;
      this.$get(url).then(res => {
        if (res.data.retCode == 200) {
          //因为浏览器刷新vuex的值就初始化了,所以需要存到浏览器中
          sessionStorage.setItem('wechataccess_token', res.data.data.access_token);
          sessionStorage.setItem('wechatuser_userName', res.data.data.userName);
          sessionStorage.setItem('wechatuser_id', res.data.data.user_id);
          .........   
          let url = sessionStorage.getItem("beforeUrl");
          //跳转
          this.$router.push(url);
        } else {
          this.Toast(res.data.message);
        }
      })
    }
  },

具体请参考,微信公众号授权文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

你可能感兴趣的:(h5,微信公众号)