merge master change

2025-07-14 19:15:06 +08:00 · 2021-10-23 19:16:00 +08:00
parent ee8dcd0888 d194e14780
commit 436781507e
328 changed files with 7300 additions and 2693 deletions
--- a/yudao-admin-ui/src/api/login.js
+++ b/yudao-admin-ui/src/api/login.js
@ -38,3 +38,64 @@ export function getCodeImg() {
    method: 'get'
  })
 }
+
+// 社交授权的跳转
+export function socialAuthRedirect(type, redirectUri) {
+  return request({
+    url: '/social-auth-redirect?type=' + type + '&redirectUri=' + redirectUri,
+    method: 'get'
+  })
+}
+
+// 社交登录，使用 code 授权码
+export function socialLogin(type, code, state) {
+  return request({
+    url: '/social-login',
+    method: 'post',
+    data: {
+      type,
+      code,
+      state
+    }
+  })
+}
+
+// 社交登录，使用 code 授权码 + + 账号密码
+export function socialLogin2(type, code, state, username, password) {
+  return request({
+    url: '/social-login2',
+    method: 'post',
+    data: {
+      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
+    }
+  })
+}
--- a/yudao-admin-ui/src/api/system/user.js
+++ b/yudao-admin-ui/src/api/system/user.js
@ -113,7 +113,7 @@ export function updateUserPwd(oldPassword, newPassword) {
 // 用户头像上传
 export function uploadAvatar(data) {
  return request({
-    url: '/system/user/profile/avatar',
+    url: '/system/user/profile/update-avatar',
    method: 'put',
    data: data
  })
--- a/yudao-admin-ui/src/permission.js
+++ b/yudao-admin-ui/src/permission.js
@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'

 NProgress.configure({ showSpinner: false })

-const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
+const whiteList = ['/login', '/social-login',  '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']

 router.beforeEach((to, from, next) => {
  NProgress.start()
--- a/yudao-admin-ui/src/router/index.js
+++ b/yudao-admin-ui/src/router/index.js
@ -43,6 +43,11 @@ export const constantRoutes = [
    component: (resolve) => require(['@/views/login'], resolve),
    hidden: true
  },
+  {
+    path: '/social-login',
+    component: (resolve) => require(['@/views/socialLogin'], resolve),
+    hidden: true
+  },
  {
    path: '/404',
    component: (resolve) => require(['@/views/error/404'], resolve),
--- a/yudao-admin-ui/src/store/modules/user.js
+++ b/yudao-admin-ui/src/store/modules/user.js
@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/login'
+import {login, logout, getInfo, socialLogin, socialLogin2} from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'

 const user = {
@ -47,6 +47,42 @@ const user = {
      })
    },

+    // 社交登录
+    SocialLogin({ commit }, userInfo) {
+      const code = userInfo.code
+      const state = userInfo.state
+      const type = userInfo.type
+      return new Promise((resolve, reject) => {
+        socialLogin(type, code, state).then(res => {
+          res = res.data;
+          setToken(res.token)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 社交登录
+    SocialLogin2({ commit }, userInfo) {
+      const code = userInfo.code
+      const state = userInfo.state
+      const type = userInfo.type
+      const username = userInfo.username.trim()
+      const password = userInfo.password
+      return new Promise((resolve, reject) => {
+        socialLogin2(type, code, state, username, password).then(res => {
+          res = res.data;
+          setToken(res.token)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
--- a/yudao-admin-ui/src/utils/constants.js
+++ b/yudao-admin-ui/src/utils/constants.js
@ -66,3 +66,27 @@ export const InfApiErrorLogProcessStatusEnum = {
  DONE: 1, // 已处理
  IGNORE: 2, // 已忽略
 }
+
+/**
+ * 用户的社交平台的类型枚举
+ */
+export const SysUserSocialTypeEnum = {
+  // GITEE: {
+  //   title: "码云",
+  //   type: 10,
+  //   source: "gitee",
+  //   img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.11/gitee.png",
+  // },
+  DINGTALK: {
+    title: "钉钉",
+    type: 20,
+    source: "dingtalk",
+    img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.11/dingtalk.png",
+  },
+  WECHAT_ENTERPRISE: {
+    title: "企业微信",
+    type: 30,
+    source: "wechat_enterprise",
+    img: "https://cdn.jsdelivr.net/gh/justauth/justauth-oauth-logo@1.11/wechat_enterprise.png",
+  }
+}
--- a/yudao-admin-ui/src/utils/dict.js
+++ b/yudao-admin-ui/src/utils/dict.js
@ -15,6 +15,7 @@ export const DICT_TYPE = {
  SYS_USER_SEX: 'sys_user_sex',
  SYS_NOTICE_TYPE: 'sys_notice_type',
  SYS_OPERATE_TYPE: 'sys_operate_type',
+  SYS_LOGIN_TYPE: 'sys_login_type',
  SYS_LOGIN_RESULT: 'sys_login_result',
  SYS_CONFIG_TYPE: 'sys_config_type',
  SYS_SMS_CHANNEL_CODE: 'sys_sms_channel_code',
--- a/yudao-admin-ui/src/views/index_old.vue
+++ b/yudao-admin-ui/src/views/index_old.vue
@ -419,7 +419,7 @@
                <li>修复表格时间为空出现的异常</li>
                <li>添加Jackson日期反序列化时区配置</li>
                <li>调整根据用户权限加载菜单数据树形结构</li>
-                <li>调整成功登陆不恢复按钮，防止多次点击</li>
+                <li>调整成功登录不恢复按钮，防止多次点击</li>
                <li>修改用户个人资料同步缓存信息</li>
                <li>修复页面同时出现el-upload和Editor不显示处理</li>
                <li>修复在角色管理页修改菜单权限偶尔未选中问题</li>
--- a/yudao-admin-ui/src/views/login.vue
+++ b/yudao-admin-ui/src/views/login.vue
@ -8,24 +8,12 @@
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
+        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
@ -34,17 +22,20 @@
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
+        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
+
+      <el-form-item style="width:100%;">
+          <div class="oauth-login" style="display:flex">
+            <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
+              <img :src="item.img" height="25px" width="25px" alt="登录" >
+              <span>{{item.title}}</span>
+            </div>
+        </div>
+      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
@ -54,16 +45,16 @@
 </template>

 <script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg,socialAuthRedirect } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
+import {InfApiErrorLogProcessStatusEnum, SysUserSocialTypeEnum} from "@/utils/constants";

 export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
-      cookiePassword: "",
      loginForm: {
        username: "admin",
        password: "admin123",
@ -81,18 +72,22 @@ export default {
        code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
      },
      loading: false,
-      redirect: undefined
+      redirect: undefined,
+      // 枚举
+      SysUserSocialTypeEnum: SysUserSocialTypeEnum,
    };
  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect;
-      },
-      immediate: true
-    }
-  },
+  // watch: {
+  //   $route: {
+  //     handler: function(route) {
+  //       this.redirect = route.query && route.query.redirect;
+  //     },
+  //     immediate: true
+  //   }
+  // },
  created() {
+    // 重定向地址
+    this.redirect = this.$route.query.redirect;
    this.getCode();
    this.getCookie();
  },
@ -135,6 +130,20 @@ export default {
          });
        }
      });
+    },
+    doSocialLogin(socialTypeEnum) {
+      // console.log("开始Oauth登录...%o", socialTypeEnum.code);
+      // 设置登录中
+      this.loading = true;
+      // 计算 redirectUri
+      const redirectUri = location.origin + '/social-login?type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/"); // 重定向不能丢
+      // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
+      // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
+      // 进行跳转
+      socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => {
+        // console.log(res.url);
+        window.location.href = res.data;
+      });
    }
  }
 };
@ -201,4 +210,21 @@ export default {
 .login-code-img {
  height: 38px;
 }
+.oauth-login {
+  display: flex;
+  cursor:pointer;
+}
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
 </style>
--- a/yudao-admin-ui/src/views/socialLogin.vue
+++ b/yudao-admin-ui/src/views/socialLogin.vue
@ -0,0 +1,187 @@
+<template>
+  <div class="login">
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">绑定账号</h3>
+      <el-form-item prop="username">
+        <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
+          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+        </el-input>
+      </el-form-item>
+      <el-form-item style="width:100%;">
+        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+          <span v-if="!loading">提 交</span>
+          <span v-else>提 交 中...</span>
+        </el-button>
+      </el-form-item>
+
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2020-2021 iocoder.cn All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { socialLogin } from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from '@/utils/jsencrypt'
+
+export default {
+  name: "ThirdLogin",
+  data() {
+    return {
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: false, // TODO 芋艿：后面看情况，去掉这块
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" }
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" }
+        ],
+      },
+      loading: false,
+      redirect: undefined,
+      // 社交登录相关
+      type: undefined,
+      code: undefined,
+      state: undefined,
+    };
+  },
+  // watch: {
+  //   $route: {
+  //     handler: function(route) {
+  //       this.redirect = route.query && route.query.redirect;
+  //     },
+  //     immediate: true
+  //   }
+  // },
+  created() {
+    this.getCookie();
+    // 重定向地址
+    this.redirect = this.$route.query.redirect;
+    // 社交登录相关
+    this.type = this.$route.query.type;
+    this.code = this.$route.query.code;
+    this.state = this.$route.query.state;
+    this.$store.dispatch("SocialLogin", {
+      code: this.code,
+      state: this.state,
+      type: this.type
+    }).then(() => {
+      this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+    }).catch(() => {
+      this.loading = false;
+    });
+  },
+  methods: {
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+          }
+          this.$store.dispatch("SocialLogin2", {
+            code: this.code,
+            state: this.state,
+            type: this.type,
+            username: this.loginForm.username,
+            password: this.loginForm.password
+          }).then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+          }).catch(() => {
+            this.loading = false;
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("http://static.yudao.iocoder.cn/login-background.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>
--- a/yudao-admin-ui/src/views/system/loginlog/index.vue
+++ b/yudao-admin-ui/src/views/system/loginlog/index.vue
@ -37,7 +37,7 @@
      <el-table-column label="访问编号" align="center" prop="id" />
      <el-table-column label="日志类型" align="center" prop="logType">
        <template slot-scope="scope">
-          <span>{{ scope.row.logType === 100 ? '登录' : '退出' }}</span>
+          <span>{{ getDictDataLabel(DICT_TYPE.SYS_LOGIN_TYPE, scope.row.logType) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名称" align="center" prop="username" />
@ -132,7 +132,7 @@ export default {
        }).then(function() {
          return exportLoginLog(queryParams);
        }).then(response => {
-          this.downloadExcel(response, '登陆日志.xls');
+          this.downloadExcel(response, '登录日志.xls');
        })
    }
  }
--- a/yudao-admin-ui/src/views/system/role/index.vue
+++ b/yudao-admin-ui/src/views/system/role/index.vue
@ -66,7 +66,7 @@
      </el-table-column>
    </el-table>

-    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="getList"/>

    <!-- 添加或修改角色配置对话框 -->
--- a/yudao-admin-ui/src/views/system/session/index.vue
+++ b/yudao-admin-ui/src/views/system/session/index.vue
@ -2,22 +2,10 @@
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="登录地址" prop="userIp">
-        <el-input
-          v-model="queryParams.userIp"
-          placeholder="请输入登录地址"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable size="small" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="用户名称" prop="username">
-        <el-input
-          v-model="queryParams.username"
-          placeholder="请输入用户名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable size="small" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@ -25,15 +13,11 @@
      </el-form-item>

    </el-form>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      style="width: 100%;"
-    >
+    <el-table v-loading="loading" :data="list" style="width: 100%;">
      <el-table-column label="会话编号" align="center" prop="id" width="300" />
      <el-table-column label="登录名称" align="center" prop="username" width="100" />
      <el-table-column label="部门名称" align="center" prop="deptName" width="100" />
-      <el-table-column label="登陆地址" align="center" prop="userIp" width="100" />
+      <el-table-column label="登录地址" align="center" prop="userIp" width="100" />
      <el-table-column label="userAgent" align="center" prop="userAgent" :show-overflow-tooltip="true" />
      <el-table-column label="登录时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
@ -42,13 +26,8 @@
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleForceLogout(scope.row)"
-            v-hasPermi="['system:user-session:delete']"
-          >强退</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleForceLogout(scope.row)"
+            v-hasPermi="['system:user-session:delete']">强退</el-button>
        </template>
      </el-table-column>
    </el-table>
--- a/yudao-admin-ui/src/views/system/user/profile/index.vue
+++ b/yudao-admin-ui/src/views/system/user/profile/index.vue
@ -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
    }
  }
 };
--- a/yudao-admin-ui/src/views/system/user/profile/userAvatar.vue
+++ b/yudao-admin-ui/src/views/system/user/profile/userAvatar.vue
@ -123,11 +123,11 @@ export default {
    uploadImg() {
      this.$refs.cropper.getCropBlob(data => {
        let formData = new FormData();
-        formData.append("avatarfile", data);
-        uploadAvatar(formData).then(response => {
+        formData.append("avatarFile", data);
+        uploadAvatar(formData).then(resp => {
          this.open = false;
-          this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
-          store.commit('SET_AVATAR', this.options.img);
+          // this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
+          store.commit('SET_AVATAR', resp.data);
          this.msgSuccess("修改成功");
          this.visible = false;
        });
@ -164,4 +164,4 @@ export default {
  line-height: 110px;
  border-radius: 50%;
 }
-</style>
+</style>
--- a/yudao-admin-ui/src/views/system/user/profile/userSocial.vue
+++ b/yudao-admin-ui/src/views/system/user/profile/userSocial.vue
@ -0,0 +1,100 @@
+<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>