|
|
@@ -1,13 +1,18 @@
|
|
|
<template>
|
|
|
<div class="login-container flex-row">
|
|
|
- <div class="part">
|
|
|
- <div class="title">SSO</div>
|
|
|
+ <div class="part" v-if="userInfo.avatarUrl">
|
|
|
+ <div class="user">
|
|
|
+ <img :src="userInfo.avatarUrl" alt="" class="avatar">
|
|
|
+ <div class="name">{{ userInfo.nickname }}</div>
|
|
|
+ <div class="info">登录成功即可绑定</div>
|
|
|
+ </div>
|
|
|
+ <Account from="sso" :ssoInfo="userInfo" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { computed, defineComponent, getCurrentInstance } from 'vue';
|
|
|
+import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { useStore } from '/@/store/index';
|
|
|
import dayjs from 'dayjs';
|
|
|
@@ -15,9 +20,9 @@ import api from '/@/api/system';
|
|
|
import { Session, Local } from '/@/utils/storage';
|
|
|
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
|
|
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
|
|
-import { formatAxis } from '/@/utils/formatTime';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { setToken } from "/@/utils/auth";
|
|
|
+import Account from '/@/views/login/component/account.vue';
|
|
|
|
|
|
// 定义接口来定义对象的类型
|
|
|
interface LoginState {
|
|
|
@@ -27,6 +32,7 @@ interface LoginState {
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
|
+ Account
|
|
|
},
|
|
|
data: function () {
|
|
|
return {
|
|
|
@@ -50,34 +56,31 @@ export default defineComponent({
|
|
|
const store = useStore();
|
|
|
const { proxy } = getCurrentInstance() as any;
|
|
|
|
|
|
- // 时间获取
|
|
|
- const currentTime = computed(() => {
|
|
|
- return formatAxis(new Date());
|
|
|
- });
|
|
|
+ const userInfo = ref<any>({})
|
|
|
|
|
|
- api.login.oauth({
|
|
|
- code: location.search.split('=')[1],
|
|
|
- types: route.params.type,
|
|
|
- state: ''
|
|
|
- }).then(async (res: any) => {
|
|
|
+ api.sso.callback(route.query).then(async (res: any) => {
|
|
|
+
|
|
|
+ if (!res.loginUser) {
|
|
|
+ userInfo.value = res.oauthUser
|
|
|
+ return
|
|
|
+ }
|
|
|
|
|
|
- setToken(res.token);
|
|
|
- localStorage.setItem('token', res.token);
|
|
|
- const userInfos = res.userInfo;
|
|
|
+ setToken(res.loginUser.token);
|
|
|
+ localStorage.setItem('token', res.loginUser.token);
|
|
|
+ const userInfos = res.loginUser;
|
|
|
userInfos.avatar = proxy.getUpFileUrl(userInfos.avatar);
|
|
|
// 存储 token 到浏览器缓存
|
|
|
Local.set('userInfo', userInfos);
|
|
|
// 存储用户信息到浏览器缓存
|
|
|
Session.set('userInfo', userInfos);
|
|
|
|
|
|
-
|
|
|
// 获取权限配置，上传文件类型等
|
|
|
- // const [columnRes, buttonRes, uploadFileRes] = await Promise.all([api.getInfoByKey('sys.column.switch'), api.getInfoByKey('sys.button.switch'), api.getInfoByKey('sys.uploadFile.way')])
|
|
|
+ const [columnRes, buttonRes, uploadFileRes] = await Promise.all([api.getInfoByKey('sys.column.switch'), api.getInfoByKey('sys.button.switch'), api.getInfoByKey('sys.uploadFile.way')])
|
|
|
|
|
|
- // const isSecurityControlEnabled = sessionStorage.isSecurityControlEnabled || null
|
|
|
- // localStorage.setItem('btnNoAuth', (isSecurityControlEnabled && Number(buttonRes?.data?.configValue)) ? '' : '1');
|
|
|
- // localStorage.setItem('colNoAuth', (isSecurityControlEnabled && Number(columnRes?.data?.configValue)) ? '' : '1');
|
|
|
- // localStorage.setItem('uploadFileWay', uploadFileRes?.data?.configValue || '0');
|
|
|
+ const isSecurityControlEnabled = sessionStorage.isSecurityControlEnabled || null
|
|
|
+ localStorage.setItem('btnNoAuth', (isSecurityControlEnabled && Number(buttonRes?.data?.configValue)) ? '' : '1');
|
|
|
+ localStorage.setItem('colNoAuth', (isSecurityControlEnabled && Number(columnRes?.data?.configValue)) ? '' : '1');
|
|
|
+ localStorage.setItem('uploadFileWay', uploadFileRes?.data?.configValue || '0');
|
|
|
|
|
|
await store.dispatch('userInfos/setUserInfos', userInfos);
|
|
|
|
|
|
@@ -126,12 +129,37 @@ export default defineComponent({
|
|
|
ElMessage.success('登录成功');
|
|
|
};
|
|
|
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ userInfo
|
|
|
+ };
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.user {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ font-size: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #f40;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
html[data-theme='dark'] {
|
|
|
.login-container {
|
|
|
background: #293146;
|
