wechatLogin.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view>
  3. <u-toast ref="uToast" />
  4. </view>
  5. </template>
  6. <script>
  7. import getUrlParams from '@/utils/getUrlParams.js';
  8. export default {
  9. data() {
  10. return {
  11. backUrl: '',
  12. code: '',
  13. loginType: 2
  14. };
  15. },
  16. onLoad(page) {
  17. let local = window.location.href;
  18. let locationLocaturl = window.location.search;
  19. // 微信返回的回调地址
  20. let backUrl = getUrlParams(local, 'backUrl');
  21. if (backUrl) {
  22. this.backUrl = decodeURIComponent(backUrl);
  23. }
  24. console.log('backUrl', decodeURIComponent(backUrl));
  25. let loginType = getUrlParams(local, 'loginType');
  26. if (loginType) {
  27. this.loginType = loginType;
  28. }
  29. console.log('loginType', loginType);
  30. let code = getUrlParams(locationLocaturl, 'code');
  31. console.log('code', code);
  32. if (code) {
  33. this.code = code;
  34. // 判断重复回调问题
  35. let wechatLoginKey = localStorage.getItem('wechatLoginKey');
  36. if (wechatLoginKey) {
  37. wechatLoginKey = JSON.parse(wechatLoginKey);
  38. if (code === wechatLoginKey.code) {
  39. this.getUserInfo(wechatLoginKey.openId);
  40. } else {
  41. this.handleGetWXInfo(this.code);
  42. }
  43. } else {
  44. this.handleGetWXInfo(this.code);
  45. }
  46. } else {
  47. location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?
  48. appid=${this.config.wxAppid}&
  49. redirect_uri=${encodeURIComponent(local)}&
  50. response_type=code&
  51. scope=snsapi_userinfo&
  52. state=STATE#wechat_redirect`;
  53. }
  54. },
  55. methods: {
  56. // 通过code获取 openId等用户信息
  57. handleGetWXInfo(code) {
  58. uni.showLoading({
  59. title: '加载中'
  60. });
  61. this.$u.api
  62. .getWXInfo(code)
  63. .then((res) => {
  64. if (res.code === 200) {
  65. this.$u.vuex('vuex_wxinfo', res.data);
  66. localStorage.setItem(
  67. 'wechatLoginKey',
  68. JSON.stringify({
  69. code,
  70. openId: res.data.openId
  71. })
  72. );
  73. this.getUserInfo(res.data.openId);
  74. } else {
  75. uni.hideLoading();
  76. }
  77. })
  78. .catch((err) => {
  79. uni.hideLoading();
  80. });
  81. },
  82. /**
  83. * 通过openId获取token
  84. * @param {Object} openId
  85. */
  86. getToken(openId) {
  87. this.$u.api.codeV2Api
  88. .sendSmsCodeV2api({
  89. openId
  90. })
  91. .then((res) => {
  92. if (res.code === 200) {
  93. this.$u.vuex('vuex_token', res.data.accessToken);
  94. this.$u.vuex('vuex_hasLogin', true);
  95. if (res.data.needVerify) {
  96. localStorage.setItem('backUrl', this.backUrl);
  97. this.$u.route({
  98. url: 'pages/center/phoneLogin/phoneLogin',
  99. type: 'reLaunch'
  100. });
  101. } else {
  102. this.$u.vuex('vuex_user', res.data);
  103. if (this.backUrl.indexOf('wechatLogin') > -1) {
  104. location.href = '/';
  105. } else {
  106. location.href = this.backUrl;
  107. }
  108. }
  109. uni.hideLoading();
  110. } else {
  111. this.$refs.uToast.show({
  112. title: res.msg || '获取用户信息失败!',
  113. type: 'error'
  114. });
  115. uni.hideLoading();
  116. }
  117. });
  118. },
  119. /**
  120. * @description:
  121. * @param {*} openId
  122. * @return {*}
  123. */
  124. async getUserInfo(openId) {
  125. try {
  126. const queryParams = {
  127. loginType: this.loginType,
  128. openid: openId,
  129. nickName: this?.vuex_wxinfo?.nickname,
  130. avatar: this?.vuex_wxinfo?.headImgUrl
  131. };
  132. const userInfo = await this.$u.api.userLoginApi.openidLoginApi({ ...queryParams });
  133. const { accessToken, needVerify } = userInfo.data;
  134. this.$u.vuex('vuex_token', accessToken);
  135. this.$u.vuex('vuex_hasLogin', true);
  136. if (needVerify) {
  137. localStorage.setItem('backUrl', this.backUrl);
  138. this.$u.route({
  139. url: 'pages/center/phoneLogin/phoneLogin',
  140. type: 'reLaunch'
  141. });
  142. } else {
  143. this.$u.vuex('vuex_user', userInfo.data);
  144. if (this.backUrl.indexOf('wechatLogin') > -1) {
  145. location.href = '/';
  146. } else {
  147. location.href = this.backUrl;
  148. }
  149. }
  150. uni.hideLoading();
  151. } catch (error) {
  152. this.$refs.uToast.show({
  153. title: '获取用户信息失败!',
  154. type: 'error'
  155. });
  156. uni.hideLoading();
  157. }
  158. }
  159. }
  160. };
  161. </script>