vue nuxt.js springmvc 前后端分离 微信扫码登录

在微信开放平台 配置回调域名

在 nuxt 配置中引入 wxLogin.js

head: {
    script: [
      { src: 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' }
    ]
  }

nuxt.js 使用wxLogin.js 加载二维码 

      

        

          
欢迎登录
          
        
        

        

          请使用微信扫描二维码登录
        
        

          

        
      
    

loginApi.js

import instance from '.'

const api = {}

export default api

api.polling = (data) => {
  return instance.get('/v4/auth/polling?uuid=' + data)
}

 index.js

import axios from 'axios'

const instance = axios.create({
  baseURL: '/appServer/',
  method: 'post'
})

// POST传参序列化
instance.interceptors.request.use((config) => {
  return config
}, (error) => {
  return Promise.reject(error)
})
// 返回状态判断
instance.interceptors.response.use((res) => {
  if (res.status === 200) {
    return res.data
  } else {
    return Promise.reject(res)
  }
}, (error) => {
  if (error.response.status === 401) {
    window.$nuxt.$store.dispatch('auth/logout')
    console.log(window.$nuxt)
    window.location.href = '/login?from=' + window.$nuxt._route.fullPath
  } else {
    return Promise.reject(error)
  }
})

export default instance

java 代码

   /**
     * 接收微信扫码后回调 存储微信获取用户信息
     *
     * @param code
     * @param u    uuid
     * @return
     */
    @RequestMapping("/auth")
    public void v2_oauth(String code, String u) {
        if (code != null) {
                //通过code换取网页授权access_token
                SnsAccessToken snsAccessToken = SnsAccessTokenApi.getSnsAccessToken(WebPropertiesUtil.wxLoginAppId, WebPropertiesUtil.wxLoginAppSecret, code);
                SnsUserInfo snsUserInfo = SnsAccessTokenApi.getUserInfo(snsAccessToken.getOpenid(), snsAccessToken.getAccessToken());
                // 存入缓存 this.cache.set(CacheKeyConstant.LOGIN_WX_KEY + u, 300, snsUserInfo.getUnionId(), SerializationType.JSON);
            } else {
                throw new CustomErrorException(ErrorCodes.WX_AUTH_LOGIN_ERROR);
            }
    }


    // 轮询查询是否有对应数据在 cache中
    @RequestMapping(value = "/polling")
    public RestResult polling(String uuid, HttpServletRequest request, HttpServletResponse response) {
        RestResult restResult = new RestResult();
        try {
            // 通过uuid在缓存中获取对应的值
            // String unionId = this.cache.get(CacheKeyConstant.LOGIN_WX_KEY + uuid, SerializationType.JSON);
            if (StringUtils.isNotEmpty(unionId)) {
                // 查询uuid对应的缓存中值
                // this.cache.delete(CacheKeyConstant.LOGIN_WX_KEY + uuid);
                BrdAccount account = authService.getAccountByWeiXin(unionId);
                // 登录
                if (account != null) {
                    // 登录
                    new Thread(new UpdateLoginTime(this.authService, new BrdAccount(account.getAccountId(), HttpTookit.getRealIpAddr(request)))).start();
                    if (!"".equals(account.getAccountMobile())) {
                        this.loginResult(restResult, account, response);
                    }
                } else {
                    account = new BrdAccount();
                    account.setWxKey(unionId);
                    restResult.setData(account);
                }
            }
        } catch (CustomErrorException e) {
            e.printErrorCode(restResult);
        } catch (Exception e) {
            CustomErrorException.printErrorCode(restResult, ErrorCodes.AUTH_LOGIN_ERROR, e);
        }
        return restResult;
    }