前端接入绑定社交平台的逻辑

wangwenbin10
1 parent 4a23a696
Showing 5 changed files with 136 additions and 5 deletions
yudao-admin-server/src/main/java/cn/iocoder/yudao/adminserver/modules/system/service/social/impl/SysSocialServiceImpl.java
yudao-admin-ui/src/api/login.js
yudao-admin-ui/src/views/socialLogin.vue
yudao-admin-ui/src/views/system/user/profile/index.vue
yudao-admin-ui/src/views/system/user/profile/userSocial.vue
@@ -107,7 +107,7 @@ public class SysSocialServiceImpl implements SysSocialService {
         // 逻辑三：如果 authUser 不存在于 socialUsers 中，则进行新增；否则，进行更新
         SysSocialUserDO socialUser = CollUtil.findOneByField(socialUsers, "openid", authUser.getUuid());
         SysSocialUserDO saveSocialUser = SysSocialUserDO.builder() // 新增和更新的通用属性
-                .token(authUser.getToken().getAccessToken()).rawUserInfo(toJsonString(authUser.getToken()))
+                .token(authUser.getToken().getAccessToken()).rawTokenInfo(toJsonString(authUser.getToken()))
                 .nickname(authUser.getNickname()).avatar(authUser.getAvatar()).rawUserInfo(toJsonString(authUser.getRawUserInfo()))
                 .build();
         if (socialUser == null) {
@@ -129,7 +129,7 @@ public class SysSocialServiceImpl implements SysSocialService {
         }
         // 校验，是否解绑的是非自己的
         socialUsers.forEach(socialUser -> {
-            if (Objects.equals(socialUser.getUserId(), userId)) {
+            if (!Objects.equals(socialUser.getUserId(), userId)) {
                 throw exception(SOCIAL_UNBIND_NOT_SELF);
             }
         });
@@ -74,3 +74,28 @@ export function socialLogin2(type, code, state, username, password) {
     }
   })
 }
+
+// 社交绑定，使用 code 授权码
+export function socialBind(type, code, state) {
+  return request({
+    url: '/social-bind',
+    method: 'post',
+    data: {
+      type,
+      code,
+      state,
+    }
+  })
+}
+
+// 取消社交绑定
+export function socialUnbind(type, unionId) {
+  return request({
+    url: '/social-unbind',
+    method: 'delete',
+    data: {
+      type,
+      unionId
+    }
+  })
+}
@@ -69,7 +69,6 @@ export default {
     this.getCookie();
     // 重定向地址
     this.redirect = this.$route.query.redirect;
-    debugger
     // 社交登录相关
     this.type = this.$route.query.type;
     this.code = this.$route.query.code;
@@ -33,7 +33,7 @@
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="peoples" />所属角色
-                <div class="pull-right">{{ user.roles.map(post => post.name).join(',') }}</div>
+                <div class="pull-right" v-if="user.roles">{{ user.roles.map(role => role.name).join(',') }}</div>
               </li>
               <li class="list-group-item">
                 <svg-icon icon-class="date" />创建日期
@@ -55,6 +55,9 @@
             <el-tab-pane label="修改密码" name="resetPwd">
               <resetPwd :user="user" />
             </el-tab-pane>
+            <el-tab-pane label="社交信息" name="userSocial">
+              <userSocial :user="user" :getUser="getUser" :setActiveTab="setActiveTab" />
+            </el-tab-pane>
           </el-tabs>
         </el-card>
       </el-col>
@@ -66,11 +69,12 @@
 import userAvatar from "./userAvatar";
 import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
+import userSocial from "./userSocial";
 import { getUserProfile } from "@/api/system/user";
  
 export default {
   name: "Profile",
-  components: { userAvatar, userInfo, resetPwd },
+  components: { userAvatar, userInfo, resetPwd, userSocial },
   data() {
     return {
       user: {},
@@ -87,6 +91,9 @@ export default {
       getUserProfile().then(response => {
         this.user = response.data;
       });
+    },
+    setActiveTab(activeTab) {
+      this.activeTab = activeTab
     }
   }
 };
+<template>
+  <el-table :data="socialUsers" :show-header="false">
+    <el-table-column label="社交平台" align="left" width="120">
+      <template slot-scope="scope">
+        <img style="height:20px;vertical-align: middle;" :src="scope.row.img" /> {{ scope.row.title }}
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" align="left" >
+      <template slot-scope="scope">
+        <div v-if="scope.row.unionId">
+          已绑定
+          <el-button size="large" type="text" @click="unbind(scope.row)">(解绑)</el-button>
+        </div>
+        <div v-else>
+          未绑定
+          <el-button size="large" type="text" @click="bind(scope.row)">(绑定)</el-button>
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+
+import {SysUserSocialTypeEnum} from "@/utils/constants";
+import {socialAuthRedirect, socialBind, socialUnbind} from "@/api/login";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    },
+    getUser: { // 刷新用户
+      type: Function
+    },
+    setActiveTab: { // 设置激活的
+      type: Function
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    socialUsers (){
+      const socialUsers = [];
+      for (const i in SysUserSocialTypeEnum) {
+        const socialUser = {...SysUserSocialTypeEnum[i]};
+        socialUsers.push(socialUser);
+        if (this.user.socialUsers) {
+          for (const j in this.user.socialUsers) {
+            if (socialUser.type === this.user.socialUsers[j].type) {
+              socialUser.unionId = this.user.socialUsers[j].unionId;
+              break;
+            }
+          }
+        }
+      }
+      return socialUsers;
+    }
+  },
+  created() {
+    // 社交绑定
+    const type = this.$route.query.type;
+    const code = this.$route.query.code;
+    const state = this.$route.query.state;
+    if (!code) {
+      return;
+    }
+    socialBind(type, code, state).then(resp => {
+      this.msgSuccess("绑定成功");
+      this.$router.replace('/user/profile');
+      // 调用父组件, 刷新
+      this.getUser();
+      this.setActiveTab('userSocial');
+    });
+  },
+  methods: {
+    bind(socialUser) {
+      // 计算 redirectUri
+      const redirectUri = location.origin + '/user/profile?type=' + socialUser.type;
+      // 进行跳转
+      socialAuthRedirect(socialUser.type, encodeURIComponent(redirectUri)).then((res) => {
+        // console.log(res.url);
+        window.location.href = res.data;
+      });
+    },
+    unbind(socialUser) {
+      socialUnbind(socialUser.type, socialUser.unionId).then(resp => {
+        this.msgSuccess("解绑成功");
+        socialUser.unionId = undefined;
+      });
+    },
+    close() {
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.push({ path: "/index" });
+    }
+  }
+};
+</script>