wechatLogin.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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. };
  14. },
  15. onLoad(page) {
  16. let local = window.location.href;
  17. let locationLocaturl = window.location.search;
  18. // 微信返回的回调地址
  19. let backUrl = local.split('backUrl=')[1];
  20. if (backUrl) {
  21. this.backUrl = decodeURIComponent(backUrl);
  22. }
  23. console.log('backUrl', decodeURIComponent(backUrl));
  24. let code = getUrlParams(locationLocaturl, 'code');
  25. console.log('code', code);
  26. if (code) {
  27. this.code = code;
  28. // 判断重复回调问题
  29. let wechatLoginKey = localStorage.getItem('wechatLoginKey');
  30. if (wechatLoginKey) {
  31. wechatLoginKey = JSON.parse(wechatLoginKey);
  32. if (code === wechatLoginKey.code) {
  33. this.getToken(wechatLoginKey.openId);
  34. } else {
  35. this.handleGetWXInfo(this.code);
  36. }
  37. } else {
  38. this.handleGetWXInfo(this.code);
  39. }
  40. } else {
  41. location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?
  42. appid=${this.config.wxAppid}&
  43. redirect_uri=${encodeURIComponent(local)}&
  44. response_type=code&
  45. scope=snsapi_userinfo&
  46. state=STATE#wechat_redirect`;
  47. }
  48. },
  49. methods: {
  50. // 通过code获取 openId等用户信息
  51. handleGetWXInfo(code) {
  52. uni.showLoading({
  53. title: '加载中'
  54. });
  55. this.$u.api
  56. .getWXInfo(code)
  57. .then((res) => {
  58. if (res.code === 200) {
  59. this.$u.vuex('vuex_wxinfo', res.data);
  60. localStorage.setItem(
  61. 'wechatLoginKey',
  62. JSON.stringify({
  63. code,
  64. openId: res.data.openId
  65. })
  66. );
  67. this.getToken(res.data.openId);
  68. } else {
  69. this.$refs.uToast.show({
  70. title: res.msg || '获取用户信息失败!',
  71. type: 'error'
  72. });
  73. uni.hideLoading();
  74. }
  75. })
  76. .catch((err) => {
  77. uni.hideLoading();
  78. });
  79. },
  80. /**
  81. * 通过openId获取token
  82. * @param {Object} openId
  83. */
  84. getToken(openId) {
  85. this.$u.api.codeV2Api
  86. .sendSmsCodeV2api({
  87. openId
  88. })
  89. .then((res) => {
  90. if (res.code === 200) {
  91. this.$u.vuex('vuex_token', res.data.accessToken);
  92. this.$u.vuex('vuex_hasLogin', true);
  93. if (res.data.needVerify) {
  94. localStorage.setItem('backUrl', this.backUrl);
  95. this.$u.route({
  96. url: 'pages/center/phoneLogin/phoneLogin',
  97. type: 'reLaunch'
  98. });
  99. } else {
  100. this.$u.vuex('vuex_user', res.data);
  101. if (this.backUrl.indexOf('wechatLogin') > -1) {
  102. location.href = '/';
  103. } else {
  104. location.href = this.backUrl;
  105. }
  106. }
  107. uni.hideLoading();
  108. } else {
  109. this.$refs.uToast.show({
  110. title: res.msg || '获取用户信息失败!',
  111. type: 'error'
  112. });
  113. uni.hideLoading();
  114. }
  115. });
  116. }
  117. }
  118. };
  119. </script>