feat: 第三方登录认证功能和管理页
This commit is contained in:
TsMask
339
src/views/login/components/CardLogin.vue
Normal file
339
src/views/login/components/CardLogin.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<script setup lang="ts">
|
||||
import svgLight from '@/assets/svg/light.svg';
|
||||
import svgDark from '@/assets/svg/dark.svg';
|
||||
import { reactive, toRaw, onMounted } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { viewTransitionTheme } from 'antdv-pro-layout';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useLayoutStore from '@/store/modules/layout';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { getCaptchaImage } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginSource,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
const { t, changeLocale, optionsLocale } = useI18n();
|
||||
const layoutStore = useLayoutStore();
|
||||
const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**验证码 */
|
||||
code: '',
|
||||
/**验证码uuid */
|
||||
uuid: '',
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
/**验证码状态 */
|
||||
captcha: {
|
||||
/**验证码开关 */
|
||||
enabled: false,
|
||||
/**验证码图片地址 */
|
||||
codeImg: '',
|
||||
},
|
||||
/**验证码点击状态 */
|
||||
captchaClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
useUserStore()
|
||||
.fnLogin(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
// 刷新验证码
|
||||
if (state.captcha.enabled) {
|
||||
state.from.code = '';
|
||||
fnGetCaptcha();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
function fnGetCaptcha() {
|
||||
if (state.captchaClick) return;
|
||||
state.captchaClick = true;
|
||||
getCaptchaImage()
|
||||
.then(res => {
|
||||
if (res.code !== RESULT_CODE_SUCCESS) {
|
||||
message.warning({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const { enabled, img, uuid } = res.data;
|
||||
state.captcha.enabled = Boolean(enabled);
|
||||
if (state.captcha.enabled) {
|
||||
state.captcha.codeImg = img;
|
||||
state.from.uuid = uuid;
|
||||
}
|
||||
if (res.data?.text) {
|
||||
state.from.code = res.data.text;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.captchaClick = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 国际化翻译转换
|
||||
*/
|
||||
function fnLocale() {
|
||||
let title = route.meta.title as string;
|
||||
if (title.indexOf('router.') !== -1) {
|
||||
title = t(title);
|
||||
}
|
||||
appStore.setTitle(title);
|
||||
}
|
||||
|
||||
/**改变主题色 */
|
||||
function fnClickTheme(e: any) {
|
||||
viewTransitionTheme(isDarkMode => {
|
||||
layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
|
||||
}, e);
|
||||
}
|
||||
|
||||
/**改变多语言 */
|
||||
function fnChangeLocale(e: any) {
|
||||
changeLocale(e.key);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnLocale();
|
||||
fnGetCaptcha();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ t('common.title') }}
|
||||
</div>
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-row v-if="state.captcha.enabled">
|
||||
<a-col :span="16">
|
||||
<a-form-item
|
||||
name="code"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
message: t('valid.codePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.code"
|
||||
size="large"
|
||||
:placeholder="t('valid.codeHit')"
|
||||
:maxlength="6"
|
||||
>
|
||||
<template #prefix>
|
||||
<RobotOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-image
|
||||
:alt="t('valid.codeHit')"
|
||||
style="cursor: pointer; border-radius: 2px"
|
||||
width="100px"
|
||||
height="40px"
|
||||
:preview="false"
|
||||
:src="state.captcha.codeImg"
|
||||
@click="fnGetCaptcha"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<template v-if="loginSourceState.list.length > 0">
|
||||
<a-divider :plain="true">
|
||||
{{ t('views.login.otherMethod') }}
|
||||
</a-divider>
|
||||
<a-row
|
||||
justify="center"
|
||||
align="middle"
|
||||
:wrap="false"
|
||||
:gutter="16"
|
||||
style="margin-top: 18px"
|
||||
>
|
||||
<a-col v-for="s in loginSourceState.list" :key="s.uid">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>{{ s.name }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
@click="fnClickLoginSource(s)"
|
||||
>
|
||||
<template #icon>
|
||||
<a-avatar v-if="s.icon" :src="s.icon" :alt="s.name" />
|
||||
<a-avatar v-else :alt="s.name">{{ s.name }}</a-avatar>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<a-row justify="end" align="middle" style="margin-top: 18px">
|
||||
<a-col :span="12" v-if="appStore.registerUser">
|
||||
<a-button
|
||||
type="link"
|
||||
target="_self"
|
||||
:title="t('views.login.registerBtn')"
|
||||
@click="() => router.push({ name: 'Register' })"
|
||||
>
|
||||
{{ t('views.login.registerBtn') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="appStore.i18nOpen">
|
||||
<a-dropdown trigger="click" placement="bottomRight">
|
||||
<a-button type="text">
|
||||
<template #icon> <TranslationOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="fnChangeLocale">
|
||||
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<a-tooltip placement="bottomRight">
|
||||
<template #title>{{ t('loayouts.rightContent.theme') }}</template>
|
||||
<a-button type="text" @click="fnClickTheme">
|
||||
<template #icon>
|
||||
<img
|
||||
v-if="layoutStore.proConfig.theme === 'dark'"
|
||||
:src="svgDark"
|
||||
class="theme-icon"
|
||||
/>
|
||||
<img v-else :src="svgLight" class="theme-icon" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/login/components/CardLoginForLDAP.vue
Normal file
163
src/views/login/components/CardLoginForLDAP.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { loginLDAP } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginBack,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**认证uid */
|
||||
uid: loginSourceState.selct.uid,
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
loginLDAP(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
|
||||
setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ loginSourceState.selct.name }}
|
||||
</div>
|
||||
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
:disabled="state.fromClick"
|
||||
style="margin-top: 24px"
|
||||
@click="fnClickLoginBack"
|
||||
>
|
||||
{{ t('views.login.backBtn') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/login/components/CardLoginForSMTP.vue
Normal file
163
src/views/login/components/CardLoginForSMTP.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { loginSMTP } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginBack,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**认证uid */
|
||||
uid: loginSourceState.selct.uid,
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
loginSMTP(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
|
||||
setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ loginSourceState.selct.name }}
|
||||
</div>
|
||||
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
:disabled="state.fromClick"
|
||||
style="margin-top: 24px"
|
||||
@click="fnClickLoginBack"
|
||||
>
|
||||
{{ t('views.login.backBtn') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user