|
|
@ -1,5 +1,6 @@ |
|
|
|
<template> |
|
|
|
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" label-position="top" label-width="120px" size="large"> |
|
|
|
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" |
|
|
|
label-position="top" label-width="120px" size="large"> |
|
|
|
<el-row style="margin-right: -10px; margin-left: -10px"> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item> |
|
|
@ -8,23 +9,27 @@ |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName"> |
|
|
|
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" :prefix-icon="iconHouse" link type="primary" /> |
|
|
|
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" |
|
|
|
:prefix-icon="iconHouse" link type="primary" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item prop="username"> |
|
|
|
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" :prefix-icon="iconAvatar" style="height: 42px;" /> |
|
|
|
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" |
|
|
|
:prefix-icon="iconAvatar" style="height: 42px;" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item prop="password"> |
|
|
|
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" /> |
|
|
|
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" |
|
|
|
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item prop="code"> |
|
|
|
<div class="flex w-[100%]"> |
|
|
|
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()"> |
|
|
|
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" |
|
|
|
style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()"> |
|
|
|
<template #prefix> |
|
|
|
<img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" /> |
|
|
|
</template> |
|
|
@ -44,14 +49,17 @@ |
|
|
|
</el-checkbox> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="6" :span="12"> |
|
|
|
<el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link> |
|
|
|
<el-link style="float: right" type="primary" |
|
|
|
@click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link> |
|
|
|
<!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> --> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> |
|
|
|
<el-form-item> |
|
|
|
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" @click="handleLogin()" /> |
|
|
|
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" |
|
|
|
@click="handleLogin()" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<!-- <Verify |
|
|
@ -65,213 +73,221 @@ |
|
|
|
</el-form> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ElLoading } from 'element-plus' |
|
|
|
import LoginFormTitle from './LoginFormTitle.vue' |
|
|
|
import type { RouteLocationNormalizedLoaded } from 'vue-router' |
|
|
|
import { ElLoading } from 'element-plus' |
|
|
|
import LoginFormTitle from './LoginFormTitle.vue' |
|
|
|
import type { RouteLocationNormalizedLoaded } from 'vue-router' |
|
|
|
|
|
|
|
import { useIcon } from '@/hooks/web/useIcon' |
|
|
|
import { useIcon } from '@/hooks/web/useIcon' |
|
|
|
|
|
|
|
import * as authUtil from '@/utils/auth' |
|
|
|
import { usePermissionStore } from '@/store/modules/permission' |
|
|
|
import * as LoginApi from '@/api/login' |
|
|
|
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin' |
|
|
|
import { getCodeImg } from "@/api/login"; |
|
|
|
import * as authUtil from '@/utils/auth' |
|
|
|
import { usePermissionStore } from '@/store/modules/permission' |
|
|
|
import * as LoginApi from '@/api/login' |
|
|
|
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin' |
|
|
|
import { getCodeImg } from "@/api/login"; |
|
|
|
import router from "@/router"; |
|
|
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' |
|
|
|
import * as DeptApi from '@/api/system/dept' |
|
|
|
|
|
|
|
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' |
|
|
|
import * as DeptApi from '@/api/system/dept' |
|
|
|
defineOptions({ name: 'LoginForm' }) |
|
|
|
|
|
|
|
defineOptions({ name: 'LoginForm' }) |
|
|
|
const { t } = useI18n() |
|
|
|
const message = useMessage() |
|
|
|
const iconHouse = useIcon({ icon: 'ep:house' }) |
|
|
|
const iconAvatar = useIcon({ icon: 'ep:avatar' }) |
|
|
|
const iconLock = useIcon({ icon: 'ep:lock' }) |
|
|
|
const formLogin = ref() |
|
|
|
const { validForm } = useFormValid(formLogin) |
|
|
|
const { setLoginState, getLoginState } = useLoginState() |
|
|
|
const { currentRoute, push, replace } = useRouter() |
|
|
|
const permissionStore = usePermissionStore() |
|
|
|
const redirect = ref<string>('') |
|
|
|
const loginLoading = ref(false) |
|
|
|
const verify = ref() |
|
|
|
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 |
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
const message = useMessage() |
|
|
|
const iconHouse = useIcon({ icon: 'ep:house' }) |
|
|
|
const iconAvatar = useIcon({ icon: 'ep:avatar' }) |
|
|
|
const iconLock = useIcon({ icon: 'ep:lock' }) |
|
|
|
const formLogin = ref() |
|
|
|
const { validForm } = useFormValid(formLogin) |
|
|
|
const { setLoginState, getLoginState } = useLoginState() |
|
|
|
const { currentRoute, push , replace} = useRouter() |
|
|
|
const permissionStore = usePermissionStore() |
|
|
|
const redirect = ref<string>('') |
|
|
|
const loginLoading = ref(false) |
|
|
|
const verify = ref() |
|
|
|
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 |
|
|
|
|
|
|
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) |
|
|
|
// 验证码开关 |
|
|
|
const captchaEnabled = ref(true); |
|
|
|
const codeUrl = ref(""); |
|
|
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) |
|
|
|
// 验证码开关 |
|
|
|
const captchaEnabled = ref(true); |
|
|
|
const codeUrl = ref(""); |
|
|
|
|
|
|
|
const LoginRules = { |
|
|
|
tenantName: [required], |
|
|
|
username: [required], |
|
|
|
password: [required] |
|
|
|
} |
|
|
|
const loginData = reactive({ |
|
|
|
isShowPassword: false, |
|
|
|
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, |
|
|
|
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, |
|
|
|
loginForm: { |
|
|
|
tenantName: '闻荫源码', |
|
|
|
username: 'admin', |
|
|
|
password: '123456', |
|
|
|
captchaVerification: '', |
|
|
|
rememberMe: false, |
|
|
|
code: '', |
|
|
|
uuid: '' |
|
|
|
const LoginRules = { |
|
|
|
tenantName: [required], |
|
|
|
username: [required], |
|
|
|
password: [required] |
|
|
|
} |
|
|
|
}) |
|
|
|
const loginData = reactive({ |
|
|
|
isShowPassword: false, |
|
|
|
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, |
|
|
|
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, |
|
|
|
loginForm: { |
|
|
|
tenantName: '闻荫源码', |
|
|
|
username: 'admin', |
|
|
|
password: '123456', |
|
|
|
captchaVerification: '', |
|
|
|
rememberMe: false, |
|
|
|
code: '', |
|
|
|
uuid: '' |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
const socialList = [ |
|
|
|
{ icon: 'ant-design:github-filled', type: 0 }, |
|
|
|
{ icon: 'ant-design:wechat-filled', type: 30 }, |
|
|
|
{ icon: 'ant-design:alipay-circle-filled', type: 0 }, |
|
|
|
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 } |
|
|
|
] |
|
|
|
const socialList = [ |
|
|
|
{ icon: 'ant-design:github-filled', type: 0 }, |
|
|
|
{ icon: 'ant-design:wechat-filled', type: 30 }, |
|
|
|
{ icon: 'ant-design:alipay-circle-filled', type: 0 }, |
|
|
|
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 } |
|
|
|
] |
|
|
|
|
|
|
|
// 获取验证码 |
|
|
|
// const getCode = async () => { |
|
|
|
// // 情况一,未开启:则直接登录 |
|
|
|
// if (loginData.captchaEnable === 'false') { |
|
|
|
// await handleLogin({}) |
|
|
|
// } else { |
|
|
|
// // 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录 |
|
|
|
// // 弹出验证码 |
|
|
|
// verify.value.show() |
|
|
|
// } |
|
|
|
// } |
|
|
|
function getCode() { |
|
|
|
getCodeImg().then(res => { |
|
|
|
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
|
|
|
if (captchaEnabled.value) { |
|
|
|
codeUrl.value = "data:image/gif;base64," + res.img; |
|
|
|
loginData.loginForm.uuid = res.uuid; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
//获取租户ID |
|
|
|
const getTenantId = async () => { |
|
|
|
if (loginData.tenantEnable === 'true') { |
|
|
|
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName) |
|
|
|
authUtil.setTenantId(res) |
|
|
|
// 获取验证码 |
|
|
|
// const getCode = async () => { |
|
|
|
// // 情况一,未开启:则直接登录 |
|
|
|
// if (loginData.captchaEnable === 'false') { |
|
|
|
// await handleLogin({}) |
|
|
|
// } else { |
|
|
|
// // 情况二,已开启:则展示验证码;只有完成验证码的情况,才进行登录 |
|
|
|
// // 弹出验证码 |
|
|
|
// verify.value.show() |
|
|
|
// } |
|
|
|
// } |
|
|
|
function getCode() { |
|
|
|
getCodeImg().then(res => { |
|
|
|
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
|
|
|
if (captchaEnabled.value) { |
|
|
|
codeUrl.value = "data:image/gif;base64," + res.img; |
|
|
|
loginData.loginForm.uuid = res.uuid; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
// 记住我 |
|
|
|
const getCookie = () => { |
|
|
|
const loginForm = authUtil.getLoginForm() |
|
|
|
if (loginForm) { |
|
|
|
loginData.loginForm = { |
|
|
|
...loginData.loginForm, |
|
|
|
username: loginForm.username ? loginForm.username : loginData.loginForm.username, |
|
|
|
password: loginForm.password ? loginForm.password : loginData.loginForm.password, |
|
|
|
rememberMe: loginForm.rememberMe ? true : false, |
|
|
|
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName |
|
|
|
//获取租户ID |
|
|
|
const getTenantId = async () => { |
|
|
|
if (loginData.tenantEnable === 'true') { |
|
|
|
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName) |
|
|
|
authUtil.setTenantId(res) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
const loading = ref() // ElLoading.service 返回的实例 |
|
|
|
// 登录 |
|
|
|
const handleLogin = async (params) => { |
|
|
|
console.log('登录-185') |
|
|
|
loginLoading.value = true |
|
|
|
try { |
|
|
|
await getTenantId() |
|
|
|
const data = await validForm() |
|
|
|
if (!data) { |
|
|
|
return |
|
|
|
} |
|
|
|
const res = await LoginApi.login(loginData.loginForm) |
|
|
|
if (!res) { |
|
|
|
console.log('登录-195') |
|
|
|
getCode() |
|
|
|
return |
|
|
|
} |
|
|
|
loading.value = ElLoading.service({ |
|
|
|
lock: true, |
|
|
|
text: '正在加载系统中...', |
|
|
|
background: 'rgba(0, 0, 0, 0.7)' |
|
|
|
}) |
|
|
|
if (loginData.loginForm.rememberMe) { |
|
|
|
authUtil.setLoginForm(loginData.loginForm) |
|
|
|
} else { |
|
|
|
authUtil.removeLoginForm() |
|
|
|
} |
|
|
|
authUtil.setToken(res) |
|
|
|
if (!redirect.value) { |
|
|
|
redirect.value = '/' |
|
|
|
// 记住我 |
|
|
|
const getCookie = () => { |
|
|
|
const loginForm = authUtil.getLoginForm() |
|
|
|
if (loginForm) { |
|
|
|
loginData.loginForm = { |
|
|
|
...loginData.loginForm, |
|
|
|
username: loginForm.username ? loginForm.username : loginData.loginForm.username, |
|
|
|
password: loginForm.password ? loginForm.password : loginData.loginForm.password, |
|
|
|
rememberMe: loginForm.rememberMe ? true : false, |
|
|
|
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName |
|
|
|
} |
|
|
|
} |
|
|
|
// 判断是否为SSO登录 |
|
|
|
if (redirect.value.indexOf('sso') !== -1) { |
|
|
|
window.location.href = window.location.href.replace('/login?redirect=', '') |
|
|
|
} else { |
|
|
|
console.log(redirect.value) |
|
|
|
replace({ path: redirect.value || permissionStore.addRouters[0].path }) |
|
|
|
} |
|
|
|
// 存储 部门信息 |
|
|
|
const { wsCache } = useCache() |
|
|
|
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList()) |
|
|
|
} finally { |
|
|
|
console.log('登录-224') |
|
|
|
getCode() |
|
|
|
loginLoading.value = false |
|
|
|
loading?.value?.close() |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 社交登录 |
|
|
|
const doSocialLogin = async (type: number) => { |
|
|
|
if (type === 0) { |
|
|
|
message.error('此方式未配置') |
|
|
|
} else { |
|
|
|
const handleUpdate = () => { |
|
|
|
router.push({ |
|
|
|
name: 'ForgetPassword', |
|
|
|
}) |
|
|
|
}; |
|
|
|
|
|
|
|
const loading = ref() // ElLoading.service 返回的实例 |
|
|
|
// 登录 |
|
|
|
const handleLogin = async (params) => { |
|
|
|
console.log('登录-185') |
|
|
|
loginLoading.value = true |
|
|
|
if (loginData.tenantEnable === 'true') { |
|
|
|
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => { |
|
|
|
const res = await LoginApi.getTenantIdByName(value) |
|
|
|
authUtil.setTenantId(res) |
|
|
|
try { |
|
|
|
await getTenantId() |
|
|
|
const data = await validForm() |
|
|
|
if (!data) { |
|
|
|
return |
|
|
|
} |
|
|
|
const res = await LoginApi.login(loginData.loginForm) |
|
|
|
if (!res) { |
|
|
|
console.log('登录-195') |
|
|
|
getCode() |
|
|
|
return |
|
|
|
} |
|
|
|
loading.value = ElLoading.service({ |
|
|
|
lock: true, |
|
|
|
text: '正在加载系统中...', |
|
|
|
background: 'rgba(0, 0, 0, 0.7)' |
|
|
|
}) |
|
|
|
if (loginData.loginForm.rememberMe) { |
|
|
|
authUtil.setLoginForm(loginData.loginForm) |
|
|
|
} else { |
|
|
|
authUtil.removeLoginForm() |
|
|
|
} |
|
|
|
authUtil.setToken(res) |
|
|
|
if (!redirect.value) { |
|
|
|
redirect.value = '/' |
|
|
|
} |
|
|
|
// 判断是否为SSO登录 |
|
|
|
if (redirect.value.indexOf('sso') !== -1) { |
|
|
|
window.location.href = window.location.href.replace('/login?redirect=', '') |
|
|
|
} else { |
|
|
|
console.log(redirect.value) |
|
|
|
replace({ path: redirect.value || permissionStore.addRouters[0].path }) |
|
|
|
} |
|
|
|
// 存储 部门信息 |
|
|
|
const { wsCache } = useCache() |
|
|
|
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList()) |
|
|
|
} finally { |
|
|
|
console.log('登录-224') |
|
|
|
getCode() |
|
|
|
loginLoading.value = false |
|
|
|
loading?.value?.close() |
|
|
|
} |
|
|
|
// 计算 redirectUri |
|
|
|
const redirectUri = |
|
|
|
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/') |
|
|
|
// 进行跳转 |
|
|
|
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri)) |
|
|
|
console.log(33) |
|
|
|
window.location.href = res |
|
|
|
} |
|
|
|
} |
|
|
|
watch( |
|
|
|
() => currentRoute.value, |
|
|
|
(route: RouteLocationNormalizedLoaded) => { |
|
|
|
redirect.value = route?.query?.redirect as string |
|
|
|
}, |
|
|
|
{ |
|
|
|
immediate: true |
|
|
|
|
|
|
|
// 社交登录 |
|
|
|
const doSocialLogin = async (type : number) => { |
|
|
|
if (type === 0) { |
|
|
|
message.error('此方式未配置') |
|
|
|
} else { |
|
|
|
loginLoading.value = true |
|
|
|
if (loginData.tenantEnable === 'true') { |
|
|
|
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => { |
|
|
|
const res = await LoginApi.getTenantIdByName(value) |
|
|
|
authUtil.setTenantId(res) |
|
|
|
}) |
|
|
|
} |
|
|
|
// 计算 redirectUri |
|
|
|
const redirectUri = |
|
|
|
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/') |
|
|
|
// 进行跳转 |
|
|
|
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri)) |
|
|
|
console.log(33) |
|
|
|
window.location.href = res |
|
|
|
} |
|
|
|
} |
|
|
|
) |
|
|
|
onMounted(() => { |
|
|
|
getCode(); |
|
|
|
getCookie() |
|
|
|
}) |
|
|
|
watch( |
|
|
|
() => currentRoute.value, |
|
|
|
(route : RouteLocationNormalizedLoaded) => { |
|
|
|
redirect.value = route?.query?.redirect as string |
|
|
|
}, |
|
|
|
{ |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
) |
|
|
|
onMounted(() => { |
|
|
|
getCode(); |
|
|
|
getCookie() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
:deep(.anticon) { |
|
|
|
&:hover { |
|
|
|
color: var(--el-color-primary) !important; |
|
|
|
:deep(.anticon) { |
|
|
|
&:hover { |
|
|
|
color: var(--el-color-primary) !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.login-code { |
|
|
|
float: right; |
|
|
|
width: 100%; |
|
|
|
height: 38px; |
|
|
|
|
|
|
|
img { |
|
|
|
.login-code { |
|
|
|
float: right; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
max-width: 100px; |
|
|
|
vertical-align: middle; |
|
|
|
cursor: pointer; |
|
|
|
height: 38px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
max-width: 100px; |
|
|
|
vertical-align: middle; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|