From 3fb8f1c2516f8e56ec9406426ccb4764c6c50968 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期日, 02 七月 2023 15:32:58 +0800 Subject: [PATCH] 回退 'Pull Request !20 : 统一登录授权' --- src/views/login.vue | 194 ++++++++++++++++++------------------------------ 1 files changed, 73 insertions(+), 121 deletions(-) diff --git a/src/views/login.vue b/src/views/login.vue index 3234864..9559f9b 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -4,8 +4,7 @@ <h3 class="title">RuoYi-Vue-Plus澶氱鎴风鐞嗙郴缁�</h3> <el-form-item prop="tenantId" v-if="tenantEnabled"> <el-select v-model="loginForm.tenantId" filterable placeholder="璇烽�夋嫨/杈撳叆鍏徃鍚嶇О" style="width: 100%"> - <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" - :value="item.tenantId"></el-option> + <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option> <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> </el-select> </el-form-item> @@ -15,14 +14,12 @@ </el-input> </el-form-item> <el-form-item prop="password"> - <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="瀵嗙爜" - @keyup.enter="handleLogin"> + <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="瀵嗙爜" @keyup.enter="handleLogin"> <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> </el-input> </el-form-item> <el-form-item prop="code" v-if="captchaEnabled"> - <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" - @keyup.enter="handleLogin"> + <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" @keyup.enter="handleLogin"> <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> </el-input> <div class="login-code"> @@ -39,20 +36,6 @@ <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link> </div> </el-form-item> - <div style="display: flex;justify-content: flex-end;flex-direction: row;"> - <el-button circle> - <svg-icon icon-class="qq" @click="doSocialLogin('qq')" /> - </el-button> - <el-button circle> - <svg-icon icon-class="wechat" @click="doSocialLogin('wechat')" /> - </el-button> - <el-button circle> - <svg-icon icon-class="gitee" @click="doSocialLogin('gitee')" /> - </el-button> - <el-button circle> - <svg-icon icon-class="github" @click="doSocialLogin('github')" /> - </el-button> - </div> </el-form> <!-- 搴曢儴 --> <div class="el-login-footer"> @@ -63,31 +46,30 @@ <script setup lang="ts"> import { getCodeImg, getTenantList } from '@/api/login'; -import { authBinding } from '@/api/system/social/auth'; import Cookies from 'js-cookie'; import { encrypt, decrypt } from '@/utils/jsencrypt'; import { useUserStore } from '@/store/modules/user'; import { LoginData, TenantVO } from '@/api/types'; -import { ElForm, FormRules } from 'element-plus'; +import { FormRules } from 'element-plus'; import { to } from 'await-to-js'; const userStore = useUserStore(); const router = useRouter(); const loginForm = ref<LoginData>({ - tenantId: "000000", - username: 'admin', - password: 'admin123', - rememberMe: false, - code: '', - uuid: '' + tenantId: "000000", + username: 'admin', + password: 'admin123', + rememberMe: false, + code: '', + uuid: '' }); const loginRules: FormRules = { - tenantId: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勭鎴风紪鍙�" }], - username: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勮处鍙�' }], - password: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勫瘑鐮�' }], - code: [{ required: true, trigger: 'change', message: '璇疯緭鍏ラ獙璇佺爜' }] + tenantId: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勭鎴风紪鍙�" }], + username: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勮处鍙�' }], + password: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勫瘑鐮�' }], + code: [{ required: true, trigger: 'change', message: '璇疯緭鍏ラ獙璇佺爜' }] }; const codeUrl = ref(''); @@ -106,64 +88,64 @@ const tenantList = ref<TenantVO[]>([]); const handleLogin = () => { - loginRef.value.validate(async (valid: boolean, fields: any) => { - if (valid) { - loading.value = true; - // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮� - if (loginForm.value.rememberMe) { - Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 }); - Cookies.set('username', loginForm.value.username, { expires: 30 }); - Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 }); - Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 }); - } else { - // 鍚﹀垯绉婚櫎 - Cookies.remove("tenantId"); - Cookies.remove('username'); - Cookies.remove('password'); - Cookies.remove('rememberMe'); - } - // 璋冪敤action鐨勭櫥褰曟柟娉� - // prittier-ignore - const [err] = await to(userStore.login(loginForm.value)); - if (!err) { - await router.push({ path: redirect.value || '/' }); - } else { - loading.value = false; - // 閲嶆柊鑾峰彇楠岃瘉鐮� - if (captchaEnabled.value) { - await getCode(); + loginRef.value.validate(async (valid:boolean, fields: any) => { + if (valid) { + loading.value = true; + // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮� + if (loginForm.value.rememberMe) { + Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 }); + Cookies.set('username', loginForm.value.username, { expires: 30 }); + Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 }); + Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 }); + } else { + // 鍚﹀垯绉婚櫎 + Cookies.remove("tenantId"); + Cookies.remove('username'); + Cookies.remove('password'); + Cookies.remove('rememberMe'); + } + // 璋冪敤action鐨勭櫥褰曟柟娉� + // prittier-ignore + const [err] = await to(userStore.login(loginForm.value)); + if (!err) { + await router.push({ path: redirect.value || '/' }); + } else { + loading.value = false; + // 閲嶆柊鑾峰彇楠岃瘉鐮� + if (captchaEnabled.value) { + await getCode(); + } + } + } else { + console.log('error submit!', fields); } - } - } else { - console.log('error submit!', fields); - } - }); + }); }; /** * 鑾峰彇楠岃瘉鐮� */ const getCode = async () => { - const res = await getCodeImg(); - const { data } = res; - captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; - if (captchaEnabled.value) { - codeUrl.value = 'data:image/gif;base64,' + data.img; - loginForm.value.uuid = data.uuid; - } + const res = await getCodeImg(); + const { data } = res; + captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; + if (captchaEnabled.value) { + codeUrl.value = 'data:image/gif;base64,' + data.img; + loginForm.value.uuid = data.uuid; + } }; const getCookie = () => { - const tenantId = Cookies.get("tenantId"); - const username = Cookies.get('username'); - const password = Cookies.get('password'); - const rememberMe = Cookies.get('rememberMe'); - loginForm.value = { - tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId, - username: username === undefined ? loginForm.value.username : username, - password: password === undefined ? loginForm.value.password : (decrypt(password) as string), - rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) - }; + const tenantId = Cookies.get("tenantId"); + const username = Cookies.get('username'); + const password = Cookies.get('password'); + const rememberMe = Cookies.get('rememberMe'); + loginForm.value = { + tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId, + username: username === undefined ? loginForm.value.username : username, + password: password === undefined ? loginForm.value.password : (decrypt(password) as string), + rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) + }; } @@ -171,41 +153,20 @@ * 鑾峰彇绉熸埛鍒楄〃 */ const initTenantList = async () => { - const { data } = await getTenantList(); - tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; - if (tenantEnabled.value) { - tenantList.value = data.voList; - if (tenantList.value != null && tenantList.value.length !== 0) { - loginForm.value.tenantId = tenantList.value[0].tenantId; + const { data } = await getTenantList(); + tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; + if (tenantEnabled.value) { + tenantList.value = data.voList; + if (tenantList.value != null && tenantList.value.length !== 0) { + loginForm.value.tenantId = tenantList.value[0].tenantId; + } } - } } -//妫�娴嬬鎴烽�夋嫨妗嗙殑鍙樺寲 -watch(() => loginForm.value.tenantId, (val: string) => { - Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 }) -}); - -/** - * 绗笁鏂圭櫥褰� - * @param type - */ -const doSocialLogin = (type: string) => { - authBinding(type).then((res: any) => { - if (res.code === 200) { - window.location.href = res.msg; - } else { - ElMessage.error(res.msg); - } - }); -}; - - - onMounted(() => { - getCode(); - initTenantList(); - getCookie(); + getCode(); + initTenantList(); + getCookie(); }); </script> @@ -218,7 +179,6 @@ background-image: url("../assets/images/login-background.jpg"); background-size: cover; } - .title { margin: 0px auto 30px auto; text-align: center; @@ -230,39 +190,32 @@ background: #ffffff; width: 400px; padding: 25px 25px 5px 25px; - .el-input { height: 40px; - input { height: 40px; } } - .input-icon { height: 39px; width: 14px; margin-left: 0px; } } - .login-tip { font-size: 13px; text-align: center; color: #bfbfbf; } - .login-code { width: 33%; height: 40px; float: right; - img { cursor: pointer; vertical-align: middle; } } - .el-login-footer { height: 40px; line-height: 40px; @@ -271,11 +224,10 @@ width: 100%; text-align: center; color: #fff; - font-family: Arial, serif; + font-family: Arial,serif; font-size: 12px; letter-spacing: 1px; } - .login-code-img { height: 40px; padding-left: 12px; -- Gitblit v1.9.3