From acd82e817644e75fb61088d3dfb937859d7f3819 Mon Sep 17 00:00:00 2001 From: yinbangzhong <zhongbangyin@126.com> Date: 星期三, 07 八月 2024 16:27:15 +0800 Subject: [PATCH] 登录跳转权限配置页面 --- src/views/login/components/login-form.vue | 200 ++++++++++++++++++++++++++------------------------ 1 files changed, 104 insertions(+), 96 deletions(-) diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue index a1259f6..5519dfd 100644 --- a/src/views/login/components/login-form.vue +++ b/src/views/login/components/login-form.vue @@ -1,6 +1,6 @@ <template> <div class="login-form-wrapper"> - <div class="login-form-title">{{ $t('login.form.title') }}</div> + <div class="login-form-title">{{ $t("login.form.title") }}</div> <!-- <div class="login-form-sub-title">{{ $t('login.form.title') }}</div>--> <div class="login-form-error-msg">{{ errorMessage }}</div> <a-form @@ -45,12 +45,12 @@ :model-value="loginConfig.rememberPassword" @change="setRememberPassword as any" > - {{ $t('login.form.rememberPassword') }} + {{ $t("login.form.rememberPassword") }} </a-checkbox> - <a-link>{{ $t('login.form.forgetPassword') }}</a-link> + <a-link>{{ $t("login.form.forgetPassword") }}</a-link> </div> <a-button type="primary" html-type="submit" long :loading="loading"> - {{ $t('login.form.login') }} + {{ $t("login.form.login") }} </a-button> <!-- <a-button type="text" long class="login-form-register-btn"> {{ $t('login.form.register') }} @@ -61,108 +61,116 @@ </template> <script lang="ts" setup> - import { ref, reactive } from 'vue'; - import { useRouter } from 'vue-router'; - import { Message } from '@arco-design/web-vue'; - import { ValidatedError } from '@arco-design/web-vue/es/form/interface'; - import { useI18n } from 'vue-i18n'; - import { useStorage } from '@vueuse/core'; - import { useUserStore } from '@/store'; - import useLoading from '@/hooks/loading'; - import type { LoginData } from '@/api/user'; - import { rsaPsw } from '@/utils/ras'; +import { reactive, ref } from "vue"; +import { useRouter } from "vue-router"; +import { Message } from "@arco-design/web-vue"; +import { ValidatedError } from "@arco-design/web-vue/es/form/interface"; +import { useI18n } from "vue-i18n"; +import { useStorage } from "@vueuse/core"; +import { useUserStore } from "@/store"; +import useLoading from "@/hooks/loading"; +import type { LoginData } from "@/api/user"; +import { rsaPsw } from "@/utils/ras"; - const router = useRouter(); - const { t } = useI18n(); - const errorMessage = ref(''); - const { loading, setLoading } = useLoading(); - const userStore = useUserStore(); +const router = useRouter(); +const { t } = useI18n(); +const errorMessage = ref(""); +const { loading, setLoading } = useLoading(); +const userStore = useUserStore(); - const loginConfig = useStorage('login-config', { - rememberPassword: true, - email: '', // 婕旂ず榛樿鍊� - password: '', // demo default value - }); - const userInfo = reactive({ - email: '', // 婕旂ず榛樿鍊� - password: '', // demo default value - }); +const loginConfig = useStorage("login-config", { + rememberPassword: true, + email: "", // 婕旂ず榛樿鍊� + password: "" // demo default value +}); +const userInfo = reactive({ + email: "", // 婕旂ず榛樿鍊� + password: "" // demo default value +}); - const handleSubmit = async ({ - errors, - values, - }: { - errors: Record<string, ValidatedError> | undefined; - values: Record<string, any>; - }) => { - if (loading.value) return; - if (!errors) { - setLoading(true); - try { - const rsaPassWord = rsaPsw(values.password) as string; - console.log(values, '鐧诲綍淇℃伅'); - await userStore.login({ - email: values.email, - password: rsaPassWord, - } as LoginData); - const { redirect, ...othersQuery } = router.currentRoute.value.query; - router.push({ - name: 'knowledgeLib', - query: { - ...othersQuery, - }, - }); - Message.success(t('鐧诲綍鎴愬姛')); - const { rememberPassword } = loginConfig.value; - const { email, password } = values; - // 瀹為檯鐢熶骇鐜闇�瑕佽繘琛屽姞瀵嗗瓨鍌ㄣ�� - // The actual production environment requires encrypted storage. - loginConfig.value.email = rememberPassword ? email : ''; - loginConfig.value.password = rememberPassword ? password : ''; - } catch (err) { - errorMessage.value = (err as Error).message; - } finally { - setLoading(false); - } +const handleSubmit = async ({ + errors, + values + }: { + errors: Record<string, ValidatedError> | undefined; + values: Record<string, any>; +}) => { + if (loading.value) return; + if (!errors) { + setLoading(true); + try { + const rsaPassWord = rsaPsw(values.password) as string; + console.log(values, "鐧诲綍淇℃伅"); + let goto = await userStore.login({ + email: values.email, + password: rsaPassWord + } as LoginData); + const { redirect, ...othersQuery } = router.currentRoute.value.query; + router.push({ + name: goto, + query: { + ...othersQuery + } + }); + Message.success(t("鐧诲綍鎴愬姛")); + const { rememberPassword } = loginConfig.value; + const { email, password } = values; + // 瀹為檯鐢熶骇鐜闇�瑕佽繘琛屽姞瀵嗗瓨鍌ㄣ�� + // The actual production environment requires encrypted storage. + loginConfig.value.email = rememberPassword ? email : ""; + loginConfig.value.password = rememberPassword ? password : ""; + } catch (err) { + errorMessage.value = (err as Error).message; + } finally { + setLoading(false); } - }; - const setRememberPassword = (value: boolean) => { - loginConfig.value.rememberPassword = value; - }; + } +}; +const setRememberPassword = (value: boolean) => { + loginConfig.value.rememberPassword = value; +}; </script> <style lang="less" scoped> - .login-form { - &-wrapper { - width: 320px; - } +.login-form { - &-title { - color: var(--color-text-1); - font-weight: 500; - font-size: 24px; - line-height: 32px; - } +& +-wrapper { + width: 320px; +} - &-sub-title { - color: var(--color-text-3); - font-size: 16px; - line-height: 24px; - } +& +-title { + color: var(--color-text-1); + font-weight: 500; + font-size: 24px; + line-height: 32px; +} - &-error-msg { - height: 32px; - color: rgb(var(--red-6)); - line-height: 32px; - } +& +-sub-title { + color: var(--color-text-3); + font-size: 16px; + line-height: 24px; +} - &-password-actions { - display: flex; - justify-content: space-between; - } +& +-error-msg { + height: 32px; + color: rgb(var(--red-6)); + line-height: 32px; +} - &-register-btn { - color: var(--color-text-3) !important; - } - } +& +-password-actions { + display: flex; + justify-content: space-between; +} + +& +-register-btn { + color: var(--color-text-3) !important; +} + +} </style> -- Gitblit v1.8.0