微信移动端开发 - 账号登录授权

登录授权获取openid

过程：

通过appid以及一些其他参数拼接微信公众号的登录授权链接，通过所填写的回调地址会返回一个code参数回来，通过code向后台发起请求获取openid，此code只能使用一次，即获取一次openid后该code作废，获取的openid相当于token，需要缓存(storage)

  data () {
      return {
          // 填写你的appid
          appid: '....',
      }
  },
  methods: {
      // 获取code
      getWxCode () {
        // 判断当前url是否有code返回
        let noCode = window.location.href.indexOf('code=') === -1;
        // 如果没带code参数说明刚打开此页面需要登录授权
        if(noCode){
          // code回调地址
          let redirect_uri = location.origin + location.pathname;
          // 跳转到微信登录授权，各个参数的作用可以去微信公众平台查
          window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`;
        }
        //如果带code参数说明登录授权成功取出code传给后台后去openid
        else {
          let code = location.href.split('code=')[1].split('&')[0];
          this.getOpenid(code);
        }
      },
      getOpenid (code) {
          // 将code传给后台获取openid
          ....
      } 
  }

  

过程假设 ：

当前登录授权页面路由为 https://www.a.com/#/login

假设微信回调code为123456

将路由设置成访问/自动访问到/login下

回调结果：

通过以上假设，则当访问https://www.a.com/#/login时，回调跳转最终结果会到https://www.a.com下，其url地址为https://www.a.com?code=123456，由于路由设置成访问/自动访问到/login下，所以会回到当前授权页面下，则地址为https://www.a.com?code=123456/#/login，此时说明code参数已经在当前路由url下，将其取出传给后台获取openid，将openid缓存，则登录授权完成