| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-form |
| 3 | v-show="getShow" | |
| 4 | ref="formLogin" | |
| 5 | :model="loginData.loginForm" | |
| 6 | :rules="LoginRules" | |
| 7 | class="login-form" | |
| 8 | label-position="top" | |
| 9 | label-width="120px" | |
| 10 | size="large" | |
| 11 | > | |
| 12 | <el-row style="margin-right: -10px; margin-left: -10px"> | |
| 13 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 14 | <el-form-item> | |
| 15 | <LoginFormTitle style="width: 100%" /> | |
| 16 | </el-form-item> | |
| 17 | </el-col> | |
| 18 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 19 | <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName"> | |
| 20 | <el-input | |
| 21 | v-model="loginData.loginForm.tenantName" | |
| 22 | :placeholder="t('login.tenantNamePlaceholder')" | |
| 23 | :prefix-icon="iconHouse" | |
| 24 | link | |
| 25 | type="primary" | |
| 26 | /> | |
| 27 | </el-form-item> | |
| 28 | </el-col> | |
| 29 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 30 | <el-form-item prop="username"> | |
| 31 | <el-input | |
| 32 | v-model="loginData.loginForm.username" | |
| 33 | :placeholder="t('login.usernamePlaceholder')" | |
| 34 | :prefix-icon="iconAvatar" | |
| 35 | /> | |
| 36 | </el-form-item> | |
| 37 | </el-col> | |
| 38 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 39 | <el-form-item prop="password"> | |
| 40 | <el-input | |
| 41 | v-model="loginData.loginForm.password" | |
| 42 | :placeholder="t('login.passwordPlaceholder')" | |
| 43 | :prefix-icon="iconLock" | |
| 44 | show-password | |
| 45 | type="password" | |
| 46 | @keyup.enter="getCode()" | |
| 47 | /> | |
| 48 | </el-form-item> | |
| 49 | </el-col> | |
| 50 | <el-col | |
| 51 | :span="24" | |
| 52 | style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px" | |
| 53 | > | |
| 54 | <el-form-item> | |
| 55 | <el-row justify="space-between" style="width: 100%"> | |
| 56 | <el-col :span="6"> | |
| 57 | <el-checkbox v-model="loginData.loginForm.rememberMe"> | |
| 58 | {{ t('login.remember') }} | |
| 59 | </el-checkbox> | |
| 60 | </el-col> | |
| 61 | <el-col :offset="6" :span="12"> | |
| 62 | <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link> | |
| 63 | </el-col> | |
| 64 | </el-row> | |
| 65 | </el-form-item> | |
| 66 | </el-col> | |
| 67 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 68 | <el-form-item> | |
| 69 | <XButton | |
| 70 | :loading="loginLoading" | |
| 71 | :title="t('login.login')" | |
| 72 | class="w-[100%]" | |
| 73 | type="primary" | |
| 74 | @click="getCode()" | |
| 75 | /> | |
| 76 | </el-form-item> | |
| 77 | </el-col> | |
| 78 | <Verify | |
| 79 | ref="verify" | |
| 80 | :captchaType="captchaType" | |
| 81 | :imgSize="{ width: '400px', height: '200px' }" | |
| 82 | mode="pop" | |
| 83 | @success="handleLogin" | |
| 84 | /> | |
| 85 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 86 | <el-form-item> | |
| 87 | <el-row :gutter="5" justify="space-between" style="width: 100%"> | |
| 88 | <el-col :span="8"> | |
| 89 | <XButton | |
| 90 | :title="t('login.btnMobile')" | |
| 91 | class="w-[100%]" | |
| 92 | @click="setLoginState(LoginStateEnum.MOBILE)" | |
| 93 | /> | |
| 94 | </el-col> | |
| 95 | <el-col :span="8"> | |
| 96 | <XButton | |
| 97 | :title="t('login.btnQRCode')" | |
| 98 | class="w-[100%]" | |
| 99 | @click="setLoginState(LoginStateEnum.QR_CODE)" | |
| 100 | /> | |
| 101 | </el-col> | |
| 102 | <el-col :span="8"> | |
| 103 | <XButton | |
| 104 | :title="t('login.btnRegister')" | |
| 105 | class="w-[100%]" | |
| 106 | @click="setLoginState(LoginStateEnum.REGISTER)" | |
| 107 | /> | |
| 108 | </el-col> | |
| 109 | </el-row> | |
| 110 | </el-form-item> | |
| 111 | </el-col> | |
| 112 | <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider> | |
| 113 | <el-col :span="24" style="padding-right: 10px; padding-left: 10px"> | |
| 114 | <el-form-item> | |
| 115 | <div class="w-[100%] flex justify-between"> | |
| 116 | <Icon | |
| 117 | v-for="(item, key) in socialList" | |
| 118 | :key="key" | |
| 119 | :icon="item.icon" | |
| 120 | :size="30" | |
| 121 | class="anticon cursor-pointer" | |
| 122 | color="#999" | |
| 123 | @click="doSocialLogin(item.type)" | |
| 124 | /> | |
| 125 | </div> | |
| 126 | </el-form-item> | |
| 127 | </el-col> | |
| 128 | </el-row> | |
| 129 | </el-form> | |
| 130 | </template> | |
| 131 | <script lang="ts" setup> | |
| 132 | import { ElLoading } from 'element-plus' | |
| 133 | import LoginFormTitle from './LoginFormTitle.vue' | |
| 134 | import type { RouteLocationNormalizedLoaded } from 'vue-router' | |
| 135 | ||
| 136 | import { useIcon } from '@/hooks/web/useIcon' | |
| 137 | ||
| 138 | import * as authUtil from '@/utils/auth' | |
| 139 | import { usePermissionStore } from '@/store/modules/permission' | |
| 140 | import * as LoginApi from '@/api/login' | |
| 141 | import { LoginStateEnum, useFormValid, useLoginState } from './useLogin' | |
| 142 | ||
| 143 | defineOptions({ name: 'LoginForm' }) | |
| 144 | ||
| 145 | const { t } = useI18n() | |
| 146 | const message = useMessage() | |
| 147 | const iconHouse = useIcon({ icon: 'ep:house' }) | |
| 148 | const iconAvatar = useIcon({ icon: 'ep:avatar' }) | |
| 149 | const iconLock = useIcon({ icon: 'ep:lock' }) | |
| 150 | const formLogin = ref() | |
| 151 | const { validForm } = useFormValid(formLogin) | |
| 152 | const { setLoginState, getLoginState } = useLoginState() | |
| 153 | const { currentRoute, push } = useRouter() | |
| 154 | const permissionStore = usePermissionStore() | |
| 155 | const redirect = ref<string>('') | |
| 156 | const loginLoading = ref(false) | |
| 157 | const verify = ref() | |
| 158 | const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 | |
| 159 | ||
| 160 | const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) | |
| 161 | ||
| 162 | const LoginRules = { | |
| 163 | tenantName: [required], | |
| 164 | username: [required], | |
| 165 | password: [required] | |
| 166 | } | |
| 167 | const loginData = reactive({ | |
| 168 | isShowPassword: false, | |
| 169 | captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, | |
| 170 | tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, | |
| 171 | loginForm: { | |
| 172 | tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '', | |
| 173 | username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '', | |
| 174 | password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '', | |
| 175 | captchaVerification: '', | |
| 176 | rememberMe: true // 默认记录我。如果不需要，可手动修改 | |
| 177 | } | |
| 178 | }) | |
| 179 | ||
| 180 | const socialList = [ | |
| 181 | { icon: 'ant-design:wechat-filled', type: 30 }, | |
| 182 | { icon: 'ant-design:dingtalk-circle-filled', type: 20 }, | |
| 183 | { icon: 'ant-design:github-filled', type: 0 }, | |
| 184 | { icon: 'ant-design:alipay-circle-filled', type: 0 } | |
| 185 | ] | |
| 186 | ||
| 187 | // 获取验证码 | |
| 188 | const getCode = async () => { | |
| 189 | // 情况一，未开启：则直接登录 | |
| 190 | if (loginData.captchaEnable === 'false') { | |
| 191 | await handleLogin({}) | |
| 192 | } else { | |
| 193 | // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 | |
| 194 | // 弹出验证码 | |
| 195 | verify.value.show() | |
| 196 | } | |
| 197 | } | |
| 198 | // 获取租户 ID | |
| 199 | const getTenantId = async () => { | |
| 200 | if (loginData.tenantEnable === 'true') { | |
| 201 | const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName) | |
| 202 | authUtil.setTenantId(res) | |
| 203 | } | |
| 204 | } | |
| 205 | // 记住我 | |
| 206 | const getLoginFormCache = () => { | |
| 207 | const loginForm = authUtil.getLoginForm() | |
| 208 | if (loginForm) { | |
| 209 | loginData.loginForm = { | |
| 210 | ...loginData.loginForm, | |
| 211 | username: loginForm.username ? loginForm.username : loginData.loginForm.username, | |
| 212 | password: loginForm.password ? loginForm.password : loginData.loginForm.password, | |
| 213 | rememberMe: loginForm.rememberMe, | |
| 214 | tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName | |
| 215 | } | |
| 216 | } | |
| 217 | } | |
| 218 | // 根据域名，获得租户信息 | |
| 219 | const getTenantByWebsite = async () => { | |
| 220 | const website = location.host | |
| 221 | const res = await LoginApi.getTenantByWebsite(website) | |
| 222 | if (res) { | |
| 223 | loginData.loginForm.tenantName = res.name | |
| 224 | authUtil.setTenantId(res.id) | |
| 225 | } | |
| 226 | } | |
| 227 | const loading = ref() // ElLoading.service 返回的实例 | |
| 228 | // 登录 | |
| 229 | const handleLogin = async (params) => { | |
| 230 | loginLoading.value = true | |
| 231 | try { | |
| 232 | await getTenantId() | |
| 233 | const data = await validForm() | |
| 234 | if (!data) { | |
| 235 | return | |
| 236 | } | |
| 237 | loginData.loginForm.captchaVerification = params.captchaVerification | |
| 238 | const res = await LoginApi.login(loginData.loginForm) | |
| 239 | if (!res) { | |
| 240 | return | |
| 241 | } | |
| 242 | loading.value = ElLoading.service({ | |
| 243 | lock: true, | |
| 244 | text: '正在加载系统中...', | |
| 245 | background: 'rgba(0, 0, 0, 0.7)' | |
| 246 | }) | |
| 247 | if (loginData.loginForm.rememberMe) { | |
| 248 | authUtil.setLoginForm(loginData.loginForm) | |
| 249 | } else { | |
| 250 | authUtil.removeLoginForm() | |
| 251 | } | |
| 252 | authUtil.setToken(res) | |
| 253 | if (!redirect.value) { | |
| 254 | redirect.value = '/' | |
| 255 | } | |
| 256 | // 判断是否为SSO登录 | |
| 257 | if (redirect.value.indexOf('sso') !== -1) { | |
| 258 | window.location.href = window.location.href.replace('/login?redirect=', '') | |
| 259 | } else { | |
| 260 | push({ path: redirect.value || permissionStore.addRouters[0].path }) | |
| 261 | } | |
| 262 | } finally { | |
| 263 | loginLoading.value = false | |
| 264 | loading.value.close() | |
| 265 | } | |
| 266 | } | |
| 267 | ||
| 268 | // 社交登录 | |
| 269 | const doSocialLogin = async (type: number) => { | |
| 270 | if (type === 0) { | |
| 271 | message.error('此方式未配置') | |
| 272 | } else { | |
| 273 | loginLoading.value = true | |
| 274 | if (loginData.tenantEnable === 'true') { | |
| 275 | // 尝试先通过 tenantName 获取租户 | |
| 276 | await getTenantId() | |
| 277 | // 如果获取不到，则需要弹出提示，进行处理 | |
| 278 | if (!authUtil.getTenantId()) { | |
| 279 | try { | |
| 280 | const data = await message.prompt('请输入租户名称', t('common.reminder')) | |
| 281 | if (data?.action !== 'confirm') throw 'cancel' | |
| 282 | const res = await LoginApi.getTenantIdByName(data.value) | |
| 283 | authUtil.setTenantId(res) | |
| 284 | } catch (error) { | |
| 285 | if (error === 'cancel') return | |
| 286 | } finally { | |
| 287 | loginLoading.value = false | |
| 288 | } | |
| 289 | } | |
| 290 | } | |
| 291 | // 计算 redirectUri | |
| 292 | // tricky: type、redirect需要先encode一次，否则钉钉回调会丢失。 | |
| 293 | // 配合 Login/SocialLogin.vue#getUrlValue() 使用 | |
| 294 | const redirectUri = | |
| 295 | location.origin + | |
| 296 | '/social-login?' + | |
| 297 | encodeURIComponent(`type=${type}&redirect=${redirect.value || '/'}`) | |
| 298 | ||
| 299 | // 进行跳转 | |
| 300 | const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri)) | |
| 301 | window.location.href = res | |
| 302 | } | |
| 303 | } | |
| 304 | watch( | |
| 305 | () => currentRoute.value, | |
| 306 | (route: RouteLocationNormalizedLoaded) => { | |
| 307 | redirect.value = route?.query?.redirect as string | |
| 308 | }, | |
| 309 | { | |
| 310 | immediate: true | |
| 311 | } | |
| 312 | ) | |
| 313 | onMounted(() => { | |
| 314 | getLoginFormCache() | |
| 315 | getTenantByWebsite() | |
| 316 | }) | |
| 317 | </script> | |
| 318 | ||
| 319 | <style lang="scss" scoped> | |
| 320 | :deep(.anticon) { | |
| 321 | &:hover { | |
| 322 | color: var(--el-color-primary) !important; | |
| 323 | } | |
| 324 | } | |
| 325 | ||
| 326 | .login-code { | |
| 327 | float: right; | |
| 328 | width: 100%; | |
| 329 | height: 38px; | |
| 330 | ||
| 331 | img { | |
| 332 | width: 100%; | |
| 333 | height: auto; | |
| 334 | max-width: 100px; | |
| 335 | vertical-align: middle; | |
| 336 | cursor: pointer; | |
| 337 | } | |
| 338 | } | |
| 339 | </style> | |
