vue实现微信授权登录

1、微信公众号“自定义菜单-页面地址”，配置你要跳转的路径。

页面地址示例：http://xxx.xxx.com/app/main/index

注：因为业务要求这里配置跳转的是页面路径，也可以直接配置URL去获取openID；

2、在跳转到的页面生成URL，跳转后台获取用户openID

URL示例：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx55de580f08fc11a9&redirect_uri=http%3A%2F%2Fxxx.xxx.com%2FWeChat%2FweChatlogin&response_type=code&scope=snsapi_userinfo#wechat_redirect

 

生成URL的写法：

//微信授权操作
      wechat(){
        if(this.openId2){
          console.log(this.openId2)
        }else if(this.openId){
          this.$store.commit("SET_OPENID", this.openId);
        }else{
          const appid = "wx55de580f08fc11a9";
          const redirect_uri = encodeURIComponent(
            "http://xxx.xxxx.com/WeChat/weChatlogin"
          );
        const url =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          redirect_uri +
          "&response_type=code&scope=snsapi_userinfo#wechat_redirect";
          console.log(url)
        openWindow(url, "wechat", 540, 540);
      }
    },

//微信授权操作

3、后台获取openID的写法

@ApiOperation(value = "微信登陆", notes = "微信登陆的操作")
	@GetMapping("/weChatlogin")
	public ModelAndView weixinshow(String code, Model model) {
		Random random = new Random();
		Integer rang1;
		Integer rang2;
		String openId = new WeiXinUtil().getOpenIdByURL(code).toString();
		int count = wxAccessTokenService.selectCountByTime();
		WxAccessToken wxAccessToken;
		wxAccessToken = wxAccessTokenService.selectByTime();
		String accessToken = null;
		if (wxAccessToken != null) {
			wxAccessToken = wxAccessTokenService.selectByTime();
			accessToken = wxAccessToken.getAccessToken();
		} else {
			AccessToken accessToken2 = WeiXinUtil.getAccessToken(WeiXinUtil.appid, WeiXinUtil.appSecret);
			accessToken = accessToken2.getToken().toString();
			wxAccessToken = new WxAccessToken();
			wxAccessToken.setAccessToken(accessToken);
			int result = wxAccessTokenService.insert(wxAccessToken);
		}
		ModelAndView mv = new ModelAndView("redirect:http://xxx.xx.com/app/welcome/registered?openId=" + openId);
		return mv;
	}

4、后台获取openId传到前台，对地址栏解析获取openID

后台返回的路径示例：http://xxx.xx.com/app/welcome/registered?openId=omqXF03955rfIX08F6eHEvH

data接收示例：openId: this.$route.query.openId

5、获取到openID，即用户的唯一标识之后就可以进行你的登录判断即绑定微信等操作了；