From 0511e9f8770f1504c3c54359a2216fe9f52ba428 Mon Sep 17 00:00:00 2001 From: xlzy <1017866168@qq.com> Date: Wed, 23 Nov 2022 23:33:24 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91=E3=80=81?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/auth/login/callback.vue | 188 +----------- .../src/views/auth/login/login.less | 152 ++++++++++ .../src/views/auth/login/login.vue | 281 ++++-------------- .../src/views/auth/login/phoneLoginForm.vue | 65 ++-- .../src/views/auth/login/threeLogin.vue | 9 +- 5 files changed, 258 insertions(+), 437 deletions(-) create mode 100644 snowy-admin-web/src/views/auth/login/login.less diff --git a/snowy-admin-web/src/views/auth/login/callback.vue b/snowy-admin-web/src/views/auth/login/callback.vue index 83b73afc..8e766a47 100644 --- a/snowy-admin-web/src/views/auth/login/callback.vue +++ b/snowy-admin-web/src/views/auth/login/callback.vue @@ -8,7 +8,7 @@

三方登录

-
+
@@ -20,7 +20,6 @@ diff --git a/snowy-admin-web/src/views/auth/login/login.less b/snowy-admin-web/src/views/auth/login/login.less new file mode 100644 index 00000000..e2e3cf84 --- /dev/null +++ b/snowy-admin-web/src/views/auth/login/login.less @@ -0,0 +1,152 @@ +.login-icon-gray { + color: rgba(0, 0, 0, 0.25); +} +.login-validCode-img { + border: 1px solid var(--border-color-split); + cursor: pointer; + width: 100%; + height: 40px; +} +.login_background { + width: 100%; + height: 100%; + overflow: hidden; + background-size: cover; + background-position: center; + background-image: url(/img/login_background.png); +} +.login_background_front { + width: 450px; + height: 450px; + margin-left: 100px; + margin-top: 15%; + overflow: hidden; + /*position: relative;*/ + background-size: cover; + background-position: center; + background-image: url(/img/login_background_front.png); + animation-name: myfirst; + animation-duration: 5s; + animation-timing-function: linear; + animation-delay: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-play-state: running; +} +@keyframes myfirst { + 0% { + left: 0px; + top: 0px; + } + 50% { + left: 50px; + top: 0px; + } + 100% { + left: 0px; + top: 0px; + } +} +@-webkit-keyframes myfirst /* Safari and Chrome */ { + 0% { + left: 0px; + top: 0px; + } + 50% { + left: 50px; + top: 0px; + } + 100% { + left: 0px; + top: 0px; + } +} +.login_adv__title h2 { + font-size: 40px; +} +.login_adv__title h4 { + font-size: 18px; + margin-top: 10px; + font-weight: normal; +} +.login_adv__title p { + font-size: 14px; + margin-top: 10px; + line-height: 1.8; + color: rgba(255, 255, 255, 0.6); +} +.login_adv__title div { + margin-top: 10px; + display: flex; + align-items: center; +} +.login_adv__title div span { + margin-right: 15px; +} +.login_adv__title div i { + font-size: 40px; +} +.login_adv__title div i.add { + font-size: 20px; + color: rgba(255, 255, 255, 0.6); +} +/*background-image:linear-gradient(transparent, #000);*/ +.login_main { + flex: 1; + overflow: auto; + display: flex; +} +.login-form { + top: 15%; + right: 15%; + position: absolute; + width: 450px; + margin-left: 10%; + margin-top: 20px; + padding: 10px 0; +} +.login-header { + margin-bottom: 20px; +} +.login-header .logo { + display: flex; + align-items: center; +} +.login-header .logo img { + width: 35px; + height: 35px; + vertical-align: bottom; + margin-right: 10px; +} +.login-header .logo label { + font-size: 24px; +} +.login-header h2 { + font-size: 24px; + font-weight: bold; + margin-top: 40px; +} +.login_config { + position: absolute; + top: 20px; + right: 20px; +} +@media (max-width: 1200px) { + .login-form { + width: 340px; + } +} +@media (max-width: 1000px) { + .login_main { + display: block; + } + .login_background_front { + display: none; + } + .login-form { + width: 100%; + padding: 20px 40px; + right: 0 !important; + top: 0 !important; + } +} diff --git a/snowy-admin-web/src/views/auth/login/login.vue b/snowy-admin-web/src/views/auth/login/login.vue index 524e0bcd..2a2fd263 100644 --- a/snowy-admin-web/src/views/auth/login/login.vue +++ b/snowy-admin-web/src/views/auth/login/login.vue @@ -33,9 +33,14 @@ - + @@ -45,13 +50,14 @@ :placeholder="$t('login.PWPlaceholder')" size="large" autocomplete="off" + @keyup.enter="login" > - + - + @@ -78,7 +80,7 @@ {{ $t('login.forgetPassword') }}? - {{ $t('login.signIn') }} @@ -102,12 +104,15 @@ import phoneLoginForm from './phoneLoginForm.vue' import threeLogin from './threeLogin.vue' import smCrypto from '@/utils/smCrypto' + import { required } from '@/utils/formRules' export default { + name: 'Login', components: { phoneLoginForm, threeLogin }, + data() { return { activeKey: 'userAccount', @@ -121,10 +126,10 @@ autologin: false }, rules: { - account: [{ required: true, message: this.$t('login.accountError'), trigger: 'blur' }], - password: [{ required: true, message: this.$t('login.PWError'), trigger: 'blur' }] + account: [required(this.$t('login.accountError'), 'blur')], + password: [required(this.$t('login.PWError'), 'blur')] }, - islogin: false, + loading: false, config: { lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG, theme: this.$TOOL.data.get('APP_THEME') || 'default' @@ -142,8 +147,8 @@ } }, computed: { - sysBaseConfigWatch() { - return this.$store.state.global.sysBaseConfig + captchaOpen() { + return this.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true' } }, watch: { @@ -153,10 +158,6 @@ 'config.lang': function (val) { this.$i18n.locale = val this.$TOOL.data.set('APP_LANG', val) - }, - sysBaseConfigWatch(val) { - this.sysBaseConfig = val - this.refreshSwitch() } }, created() { @@ -166,27 +167,16 @@ }, mounted() { this.refreshSwitch() - // 获取回车键事件 - document.onkeydown = (e) => { - if (e.defaultPrevented) { - return; - } - const body = document.getElementsByTagName('body')[0]; - // match(浏览器中的地址,不需要包括https、http或者www),是为了防止其他页面触发 - if (e.keyCode === 13 && e.target.baseURI.match("/login") && e.target === body) { - this.login() - } - } }, methods: { // 通过开关加载内容 refreshSwitch() { // 判断是否开启验证码 - if (this.sysBaseConfig.SNOWY_SYS_DEFAULT_CAPTCHA_OPEN === 'true') { + if (this.captchaOpen) { // 加载验证码 this.loginCaptcha() // 加入校验 - this.rules.validCode = [{ required: true, message: this.$t('login.validError'), trigger: 'blur' }] + this.rules.validCode = [required(this.$t('login.validError'), 'blur')] } }, // 获取验证码 @@ -198,45 +188,40 @@ }, // 用户名密码登录 async login() { - const validate = await this.$refs.loginForm.validate().catch(() => {}) - if (!validate) return false + this.$refs.loginForm.validate().then(async () => { + this.loading = true + const loginData = { + account: this.ruleForm.account, + // 密码进行SM2加密,传输过程中看到的只有密文,后端存储使用hash + password: smCrypto.doSm2Encrypt(this.ruleForm.password), + validCode: this.ruleForm.validCode, + validCodeReqNo: this.ruleForm.validCodeReqNo + } + // 获取token + try { + const loginToken = await loginApi.login(loginData) + this.$TOOL.data.set('TOKEN', loginToken) + // 获取登录的用户信息 + const loginUser = await loginApi.getLoginUser() + this.$TOOL.data.set('USER_INFO', loginUser) - this.islogin = true - const loginData = { - account: this.ruleForm.account, - // 密码进行SM2加密,传输过程中看到的只有密文,后端存储使用hash - password: smCrypto.doSm2Encrypt(this.ruleForm.password), - validCode: this.ruleForm.validCode, - validCodeReqNo: this.ruleForm.validCodeReqNo - } - // 获取token - const login = await loginApi.login(loginData).finally(() => { - this.islogin = false - }) - this.$TOOL.data.set('TOKEN', login) - // 获取登录的用户信息 - const loginUser = await loginApi.getLoginUser() - this.$TOOL.data.set('USER_INFO', loginUser) - - // 获取用户的菜单 - const menu = await userCenterApi.userLoginMenu().catch(() => { - this.islogin = false - return - }) - this.islogin = false - const indexMenu = menu[0].children[0].path - this.$TOOL.data.set('MENU', menu) - // 重置系统默认应用 - this.$TOOL.data.set('SNOWY_MENU_MODULE_ID', menu[0].id) - this.$router.replace({ - path: indexMenu - }) - this.$message.success('登录成功') - this.$nextTick(() => { - dictApi.dictTree().then((data) => { - // 设置字典到store中 - this.$TOOL.data.set('DICT_TYPE_TREE_DATA', data) - }) + // 获取用户的菜单 + const menu = await userCenterApi.userLoginMenu() + const indexMenu = menu[0].children[0].path + this.$TOOL.data.set('MENU', menu) + // 重置系统默认应用 + this.$TOOL.data.set('SNOWY_MENU_MODULE_ID', menu[0].id) + this.$message.success('登录成功') + this.$router.replace({ + path: indexMenu + }) + dictApi.dictTree().then((data) => { + // 设置字典到store中 + this.$TOOL.data.set('DICT_TYPE_TREE_DATA', data) + }) + } catch (err) { + this.loading = false + } }) }, configLang(key) { @@ -246,156 +231,6 @@ } - diff --git a/snowy-admin-web/src/views/auth/login/phoneLoginForm.vue b/snowy-admin-web/src/views/auth/login/phoneLoginForm.vue index cd484c36..a33b4c35 100644 --- a/snowy-admin-web/src/views/auth/login/phoneLoginForm.vue +++ b/snowy-admin-web/src/views/auth/login/phoneLoginForm.vue @@ -3,7 +3,7 @@ @@ -16,21 +16,21 @@ size="large" > - {{ - (!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s' - }} + + {{ (!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s' }} + - {{ - $t('login.signIn') - }} + + {{ $t('login.signIn') }} + @@ -78,7 +78,7 @@ import dictApi from '@/api/dev/dictApi' const phoneLoginFormRef = ref() const phoneFormData = ref({}) - const islogin = ref(false) + const loading = ref(false) let state = ref({ time: 60, smsSendBtn: false @@ -109,36 +109,31 @@ // delete phoneFormData.value.phoneValidCode phoneFormData.value.validCodeReqNo = phoneValidCodeReqNo.value - islogin.value = true - const token = await loginApi.loginByPhone(phoneFormData.value).finally(() => { - islogin.value = false - }) + loading.value = true + try { + const token = await loginApi.loginByPhone(phoneFormData.value) + tool.data.set('TOKEN', token) + // 获取登录的用户信息 + const loginUser = await loginApi.getLoginUser() + tool.data.set('USER_INFO', loginUser) - tool.data.set('TOKEN', token) - // 获取登录的用户信息 - const loginUser = await loginApi.getLoginUser() - tool.data.set('USER_INFO', loginUser) - - // 获取用户的菜单 - const menu = await userCenterApi.userLoginMenu().catch(() => { - islogin.value = false - return - }) - islogin.value = false - const indexMenu = menu[0].children[0].path - tool.data.set('MENU', menu) - // 重置系统默认应用 - tool.data.set('SNOWY_MENU_MODULE_ID', menu[0].id) - router.replace({ - path: indexMenu - }) - message.success('登录成功') - nextTick(() => { + // 获取用户的菜单 + const menu = await userCenterApi.userLoginMenu() + const indexMenu = menu[0].children[0].path + tool.data.set('MENU', menu) + // 重置系统默认应用 + tool.data.set('SNOWY_MENU_MODULE_ID', menu[0].id) + message.success('登录成功') + router.replace({ + path: indexMenu + }) dictApi.dictTree().then((data) => { // 设置字典到store中 tool.data.set('DICT_TYPE_TREE_DATA', data) }) - }) + } catch (err) { + loading.value = false + } } // 弹框的 diff --git a/snowy-admin-web/src/views/auth/login/threeLogin.vue b/snowy-admin-web/src/views/auth/login/threeLogin.vue index f5878778..ebe149c2 100644 --- a/snowy-admin-web/src/views/auth/login/threeLogin.vue +++ b/snowy-admin-web/src/views/auth/login/threeLogin.vue @@ -1,6 +1,6 @@