[功能]：1、跳转url 放到配置文件里面 2、优化登录管理界面 3、添加qq登录解绑和重新绑定功能 4、个人中心增加 qq绑定信息展示view

2025-10-14 20:25:58 +08:00 · 2022-04-24 19:10:35 +08:00
parent 6a5d0169a7
commit afa550986a
10 changed files with 567 additions and 69 deletions
--- a/vue/src/api/iot/platform.js
+++ b/vue/src/api/iot/platform.js
@@ -42,3 +42,27 @@ export function delPlatform(socialPlatformId) {
    method: 'delete'
  })
 }
+
+//解除绑定
+export function unbind(socialUserId){
+  return request({
+    url: '/iot/social/unbind/' + socialUserId,
+    method: 'get'
+  })
+}
+
+//绑定跳转
+export function bind(platform){
+  return request({
+    url: '/iot/social/bind/' + platform,
+    method: 'get'
+  })
+}
+
+//绑定
+export function bindUser(bindId){
+  return request({
+    url: '/iot/social/bindId/' + bindId,
+    method: 'get'
+  })
+}
--- a/vue/src/permission.js
+++ b/vue/src/permission.js
@@ -1,11 +1,11 @@
 import router from './router'
 import store from './store'
-import { Message } from 'element-ui'
+import {Message} from 'element-ui'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
+import {getToken} from '@/utils/auth'

-NProgress.configure({ showSpinner: false })
+NProgress.configure({showSpinner: false})

 const whiteList = ['/login', '/auth-redirect', '/bind', '/register']

@@ -15,7 +15,16 @@ router.beforeEach((to, from, next) => {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
-      next({ path: '/' })
+      if (to.query.bindId) {
+        store.dispatch('BindUser', to.query.bindId).then((res) => {
+          Message.success(res.msg);
+          next({path: '/user/profile'})
+        }).catch(err=>{
+          next({path: '/'})
+        })
+      } else {
+        next({path: '/'})
+      }
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
@@ -24,14 +33,14 @@ router.beforeEach((to, from, next) => {
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            next({...to, replace: true}) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+          store.dispatch('LogOut').then(() => {
+            Message.error(err)
+            next({path: '/'})
          })
+        })
      } else {
        next()
      }
--- a/vue/src/store/modules/user.js
+++ b/vue/src/store/modules/user.js
@@ -1,5 +1,6 @@
-import {bindLogin, getInfo, login, logout, redirectLogin} from '@/api/login'
-import {getToken, removeToken, setToken} from '@/utils/auth'
+import {login, logout, getInfo, bindLogin, bindRegister, redirectLogin} from '@/api/login'
+import {bindUser} from '@/api/iot/platform'
+import {getToken, setToken, removeToken} from '@/utils/auth'

 const user = {
  state: {
@@ -69,6 +70,16 @@ const user = {
      })
    },

+    BindUser({commit}, bindId) {
+      return new Promise((resolve, reject) => {
+        bindUser(bindId).then(res => {
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
    // 获取用户信息
    GetInfo({commit, state}) {
      return new Promise((resolve, reject) => {
--- a/vue/src/views/iot/platform/index.vue
+++ b/vue/src/views/iot/platform/index.vue
@@ -36,7 +36,8 @@
          size="mini"
          @click="handleAdd"
          v-hasPermi="['iot:platform:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -47,7 +48,8 @@
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['iot:platform:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -58,7 +60,8 @@
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['iot:platform:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
@@ -68,43 +71,49 @@
          size="mini"
          @click="handleExport"
          v-hasPermi="['iot:platform:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="platformList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column align="center" label="登录平台主键" prop="socialPlatformId"/>
-      <el-table-column align="center" label="第三方平台" prop="platform">
+      <el-table-column align="center" label="平台主键" prop="socialPlatformId" width="75"/>
+      <el-table-column align="center" label="平台名称" prop="platform" width="95">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.iot_social_platform" :value="scope.row.platform"/>
        </template>
      </el-table-column>
-      <el-table-column align="center" label="状态" prop="status">
+
+      <el-table-column align="center" label="状态" prop="status" width="75">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.iot_social_platform_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
-      <el-table-column label="第三方平台申请Id" align="center" prop="clientId"/>
-      <el-table-column label="第三方平台密钥" align="center" prop="secretKey"/>
-      <el-table-column label="用户认证后跳转地址" align="center" prop="redirectUri"/>
+      <el-table-column label="平台申请Id" align="center" prop="clientId"/>
+      <el-table-column label="平台密钥" align="center" prop="secretKey" :show-overflow-tooltip="true"/>
+      <el-table-column label="跳转地址" align="center" prop="redirectUri" width="180" :show-overflow-tooltip="true"/>
+
+      <el-table-column align="center" label="绑定登录uri" prop="bindUri" :show-tooltip-when-overflow="true"
+                       :render-header="(h,column)=>renderHeaderMethods(h,column,columnTips.bindId)"/>
+      <el-table-column align="center" label="跳转登录uri" prop="redirectLoginUri" :show-tooltip-when-overflow="true"
+                       :render-header="(h,column)=>renderHeaderMethods(h,column,columnTips.redirectLogin)"/>
+      <el-table-column align="center" label="错误提示uri" prop="errorMsgUri" :show-tooltip-when-overflow="true"
+                       :render-header="(h,column)=>renderHeaderMethods(h,column,columnTips.errorId)"/>
+      <el-table-column align="center" label="备注" prop="remark" width="75" :show-tooltip-when-overflow="true"/>
      <el-table-column align="center" label="创建者" prop="createBy"/>
-      <el-table-column align="center" label="创建时间" prop="createTime" width="180">
+      <el-table-column align="center" label="创建时间" prop="createTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
-      <el-table-column align="center" label="更新时间" prop="updateTime" width="180">
+      <el-table-column align="center" label="更新者" prop="updateBy"/>
+      <el-table-column align="center" label="更新时间" prop="updateTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
-      <el-table-column align="center" label="更新者" prop="updateBy"/>
-      <el-table-column align="center" label="备注" prop="remark"/>
-      <el-table-column align="center" label="绑定注册登录uri,http://localhost/login?bindId=" prop="bindUri"/>
-      <el-table-column align="center" label="跳转登录uri,http://localhost/login?loginId=" prop="redirectLoginUri"/>
-      <el-table-column align="center" label="错误提示uri,http://localhost/login?errorId=" prop="errorMsgUri"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
@@ -121,7 +130,8 @@
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['iot:platform:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -223,6 +233,11 @@ export default {
        platform: null,
        status: null,
      },
+      columnTips: {
+        bindId: "绑定登录uri, http://localhost/login?bindId=,域名换成对应域名即可，本地开发不需要更改",
+        redirectLogin: "跳转登录uri,http://localhost/login?loginId=,域名换成对应域名即可，本地开发不需要更改",
+        errorId: "错误提示获取uri,http://localhost/login?errorId=,域名换成对应域名即可，本地开发不需要更改"
+      },
      // 表单参数
      form: {},
      // 表单校验
@@ -258,6 +273,25 @@ export default {
    this.getList();
  },
  methods: {
+    renderHeaderMethods(h, {column}, content) {
+      return h(
+        'div', [
+          h('span', column.label),
+          h('el-tooltip', {
+            props: {
+              effect: 'dark',
+              content: content,
+              placement: 'top'
+            },
+          }, [
+            h('i', {
+              class: 'el-icon-question',
+              style: 'color:#409EFF;margin-left:5px;'
+            })
+          ])
+        ]
+      );
+    },
    /** 查询第三方登录平台控制列表 */
    getList() {
      this.loading = true;
@@ -266,12 +300,14 @@ export default {
        this.total = response.total;
        this.loading = false;
      });
-    },
+    }
+    ,
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
-    },
+    }
+    ,
    // 表单重置
    reset() {
      this.form = {
@@ -292,29 +328,34 @@ export default {
        errorMsgUri: null
      };
      this.resetForm("form");
-    },
+    }
+    ,
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
-    },
+    }
+    ,
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
-    },
+    }
+    ,
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.socialPlatformId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
      this.multiple = !selection.length
-    },
+    }
+    ,
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加第三方登录平台控制";
-    },
+    }
+    ,
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
@@ -324,7 +365,8 @@ export default {
        this.open = true;
        this.title = "修改第三方登录平台控制";
      });
-    },
+    }
+    ,
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
@@ -344,17 +386,20 @@ export default {
          }
        }
      });
-    },
+    }
+    ,
    /** 删除按钮操作 */
    handleDelete(row) {
      const socialPlatformIds = row.socialPlatformId || this.ids;
-      this.$modal.confirm('是否确认删除第三方登录平台控制编号为"' + socialPlatformIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除第三方登录平台控制编号为"' + socialPlatformIds + '"的数据项？').then(function () {
        return delPlatform(socialPlatformIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    },
+      }).catch(() => {
+      });
+    }
+    ,
    /** 导出按钮操作 */
    handleExport() {
      this.download('iot/platform/export', {
--- a/vue/src/views/system/user/profile/index.vue
+++ b/vue/src/views/system/user/profile/index.vue
@@ -8,33 +8,62 @@
          </div>
          <div>
            <div class="text-center">
-              <userAvatar :user="user" />
+              <userAvatar :user="user"/>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
-                <svg-icon icon-class="user" />用户名称
+                <svg-icon icon-class="user"/>
+                用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
-                <svg-icon icon-class="phone" />手机号码
+                <svg-icon icon-class="phone"/>
+                手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
-                <svg-icon icon-class="email" />用户邮箱
+                <svg-icon icon-class="email"/>
+                用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
-                <svg-icon icon-class="tree" />所属部门
+                <svg-icon icon-class="tree"/>
+                所属部门
                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
-                <svg-icon icon-class="peoples" />所属角色
+                <svg-icon icon-class="peoples"/>
+                所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
-                <svg-icon icon-class="date" />创建日期
+                <svg-icon icon-class="date"/>
+                创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="qq"/>
+                QQ
+                <div class="pull-right" v-if="!this.qqBind">
+                  <el-button size="mini" style="margin-top: -7px" @click="bind(socialAccount.QQ.name)">未绑定</el-button>
+                </div>
+                <div style="float:right;display: flex;" v-else>
+                  <span>{{ this.socialAccount.QQ.value.nickname }}</span>
+                  <el-image style="width: 25px; height: 25px; margin-top: -7px;margin-left: 5px;margin-right: 5px"
+                            :src="this.socialAccount.QQ.value.avatar"/>
+                  <el-button style="margin-top: -5px" size="mini" @click="unbind(socialAccount.QQ.name)">解除绑定
+                  </el-button>
+                </div>
+              </li>
+
+              <li class="list-group-item">
+                <svg-icon icon-class="wechat"/>
+                微信
+                <div class="pull-right">
+                  <el-button style="margin-top: -7px" size="mini">未绑定</el-button>
+                </div>
+
+              </li>
            </ul>
          </div>
        </el-card>
@@ -46,10 +75,10 @@
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
-              <userInfo :user="user" />
+              <userInfo :user="user"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
-              <resetPwd :user="user" />
+              <resetPwd :user="user"/>
            </el-tab-pane>
          </el-tabs>
        </el-card>
@@ -62,17 +91,35 @@
 import userAvatar from "./userAvatar";
 import userInfo from "./userInfo";
 import resetPwd from "./resetPwd";
-import { getUserProfile } from "@/api/system/user";
+import {getUserProfile} from "@/api/system/user";
+import {unbind, bind} from "@/api/iot/platform";

 export default {
  name: "Profile",
-  components: { userAvatar, userInfo, resetPwd },
+  components: {userAvatar, userInfo, resetPwd},
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
-      activeTab: "userinfo"
+      activeTab: "userinfo",
+      socialGroup: [],
+      qqBind: false,
+      wechatBind: false,
+      socialAccount: {
+        QQ: {
+          name: "QQ",
+          value: null
+        },
+        Wechat: {
+          name: "Wechat",
+          value: null
+        },
+        Status: {
+          bind: "0",
+          unbind: "1"
+        }
+      },
    };
  },
  created() {
@@ -84,7 +131,53 @@ export default {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
+        this.socialGroup = response.socialGroup;
+        if (!(this.socialGroup === undefined || this.socialGroup === null)) {
+          this.socialGroup.forEach(social => {
+            if (social.status === this.socialAccount.Status.bind) {
+              switch (social.source) {
+                case this.socialAccount.QQ.name: {
+                  this.qqBind = true;
+                  this.socialAccount.QQ.value = social;
+                  break
+                }
+                case this.socialAccount.Wechat.name: {
+                  this.wechatBind = true;
+                  this.socialAccount.Wechat.value = social;
+                  break
+                }
+              }
+            }
+          })
+        }
      });
+    },
+    bind(type) {
+      switch (type) {
+        case this.socialAccount.QQ.name: {
+          if (!this.qqBind) {
+            bind(type).then((res) => {
+              window.location.href = "http://localhost:8080/auth/render/qq";
+            });
+          }
+          break;
+        }
+      }
+
+    },
+    unbind(type) {
+      switch (type) {
+        case this.socialAccount.QQ.name: {
+          if (this.qqBind) {
+            unbind(this.socialAccount.QQ.value.socialUserId).then((res) => {
+              this.$modal.msgSuccess(res.msg);
+              this.qqBind = false;
+              this.socialAccount.QQ.value = null;
+            })
+          }
+          break;
+        }
+      }
    }
  }
 };