扫码成功用于确认以后开始带着code和state执行回调url获取token和openid，根据openid查询数据库看用户是否微信扫码注册过，如果没有则向wx发送获取用户信息的请求最后向本地数据插入信息
@GetMapping("callback") public String callback(String code,String state){ System.out.println("code:"+code); System.out.println("state:"+state); try { //向认证服务器发送请求换取access_token String baseAccessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token" + "?appid=%s" + "&secret=%s" + "&code=%s" + "&grant_type=authorization_code"; String accessTokenUrl = String.format( baseAccessTokenUrl, ConstantPropertiesUtil.WX_OPEN_APP_ID, ConstantPropertiesUtil.WX_OPEN_APP_SECRET, code ); //请求这个拼接好的地址,得到access_token 和openid //使用httpClient发送请求，获取结果 String accessTokenInfo = HttpClientUtils.get(accessTokenUrl); System.out.println("accessTokenInfo:"+accessTokenInfo); //解析json字符串 Gson gson = new Gson(); HashMap map = gson.fromJson(accessTokenInfo, HashMap.class); String accessToken = (String)map.get("access_token"); String openid = (String)map.get("openid"); //查询数据库当前用户是否使用微信登陆过 UcenterMember member = memberService.getById(openid); if (member == null){ System.out.println("新用户开始注册"); String baseUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo" + "?access_token=%s" + "&openid=%s"; String userInfoUrl = String.format(baseUserInfoUrl, accessToken, openid); String resultUserInfo = HttpClientUtils.get(userInfoUrl); System.out.println("resultUserInfo==========" + resultUserInfo); //解析json HashMap<String, Object> mapUserInfo = gson.fromJson(resultUserInfo, HashMap.class); String nickname = (String)mapUserInfo.get("nickname"); String headimgurl = (String)mapUserInfo.get("headimgurl"); //向数据库中插入一条记录 member = new UcenterMember(); member.setNickname(nickname); member.setOpenid(openid); member.setAvatar(headimgurl); memberService.save(member); //使用jwt根据member对象生成token字符串 String token = JwtUtils.getJwtToken(member.getId(), member.getNickname()); //最后返回首页，通过路径传递token字符串(因为cookie不能跨域) return "redirect:http://localhost:3000?token="+token; } }catch (Exception e){ e.printStackTrace(); } return "redirect:http://localhost:3000"; }
前端
data() { return { token: '', loginInfo: { id: '', age: '', avatar: '', mobile: '', nickname: '', sex: '' } } }, created() { this.token = this.$route.query.token if (this.token) { this.wxLogin() } this.showInfo() }, methods: { showInfo() { // debugger var jsonStr = cookie.get('guli_ucenter') // alert(jsonStr) if (jsonStr) { this.loginInfo = JSON.parse(jsonStr) } console.log(this.loginInfo.id) }, wxLogin() { if (this.token === '') return // 把token存在cookie中、也可以放在localStorage中 cookie.set('guli_token', this.token, { domain: 'localhost' }) cookie.set('guli_ucenter', '', { domain: 'localhost' }) // 登录成功根据token获取用户信息 userApi.getLoginInfo().then(response => { this.loginInfo = response.data.data.userInfo // 将用户信息记录cookie cookie.set('guli_ucenter', JSON.stringify(this.loginInfo), { domain: 'localhost' }) }) }, logout() { cookie.set('guli_ucenter', '', { domain: 'localhost' }) cookie.set('guli_token', '', { domain: 'localhost' }) // 跳转页面 window.location.href = '/' } } }
展示
<!-- / nav --> <ul class="h-r-login"> <li v-if="!loginInfo.id" id="no-login"> <a href="/login" title="登录"> <em class="icon18 login-icon"/> <span class="vam ml5">登录</span> </a> <a href="/register" title="注册"> <span class="vam ml5">注册</span> </a> </li> <li v-if="loginInfo.id" id="is-login-one" class="mr10"> <a id="headerMsgCountId" href="#" title="消息"> <em class="icon18 news-icon"> </em> </a> <q class="red-point" style="display: none"> </q> </li> <li v-if="loginInfo.id" id="is-login-two" class="h-r-user"> <a href="/ucenter" title> <img :src="loginInfo.avatar" width="30" height="30" class="vam picImg" alt > <span id="userName" class="vam disIb">{{ loginInfo.nickname }}</span> </a> <a href="javascript:void(0)" title="退出" class="ml5" @click="logout();">退出</a> </li> </ul> <!-- /未登录显示第1 li；登录后显示第2，3 li -->
