!16 扩展第三方登录授权功能 * add 第三方授权 * add 第三方授权登录

三个三

2023-06-20 aae6bb75059718ca4ae0b3361a1a7ea48faca87e

 src/views/system/user/profile/index.vue

@@ -1,31 +1,3 @@
<script setup name="Profile" lang="ts">
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = ref<{ user: any; roleGroup: string;  postGroup: string}>({
  user: {},
  roleGroup: '',
  postGroup: ''
});

const userForm = ref({});

const getUser = async () => {
  const res = await getUserProfile();
  state.value.user = res.data.user;
  userForm.value = { ...res.data.user }
  state.value.roleGroup = res.data.roleGroup;
  state.value.postGroup = res.data.postGroup;
};

onMounted(() => {
  getUser();
})
</script>

<template>
  <div class="p-2">
    <el-row :gutter="20">
@@ -83,9 +55,49 @@
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
            <el-tab-pane label="第三方应用" name="thirdParty">
              <thirdParty :auths="state.auths" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Profile" lang="ts">
import userAvatar from "./userAvatar.vue";
import userInfo from "./userInfo.vue";
import resetPwd from "./resetPwd.vue";
import thirdParty from "./thirdParty.vue";
import { getAuthList } from "@/api/system/social/auth";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = ref<{ user: any; roleGroup: string;  postGroup: string; auths:any[]}>({
    user: {},
    roleGroup: '',
    postGroup: '',
    auths: [],
});

const userForm = ref({});

const getUser = async () => {
    const res = await getUserProfile();
    state.value.user = res.data.user;
    userForm.value = { ...res.data.user }
    state.value.roleGroup = res.data.roleGroup;
    state.value.postGroup = res.data.postGroup;
};

const getAuths = async () => {
    const res = await getAuthList();
    state.value.auths = res.data;
};

onMounted(() => {
    getUser();
    getAuths();
})
</script>