Js
/
lyr-one-test
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录修改

Browse Source
main
mo 1 year ago
parent c103785f50
commit c32c0628f6
2 changed files with 164 additions and 76 deletions
Show Stats Download Patch File Download Diff File

4
src/store/modules/user.js
Unescape Escape View File

@ -78,6 +78,10 @@ const user = {
const socialType = userInfo.socialType const socialType = userInfo.socialType
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(username, password, captchaVerification, socialType, socialCode, socialState).then(res => { login(username, password, captchaVerification, socialType, socialCode, socialState).then(res => {
console.log(res)
if(res.result){
alert(res.result)
}
res = res.data; res = res.data;
// 设置 token // 设置 token
setToken(res) setToken(res)

220
src/views/login.vue
Unescape Escape View File

@ -2,42 +2,89 @@
<div class="login"> <div class="login">
<div class="login-in-box"> <div class="login-in-box">
<div class="login-left"> <div class="login-left">
<img src="@/assets/images/demo.png" alt=""> <img src="@/assets/images/demo.png" alt="" />
</div> </div>
<div class="login-right"> <div class="login-right">
<div class="login-form"> <div class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<el-form-item> <el-form-item>
<div class="login-title">链友融财务数字一体化信息系统</div> <div class="login-title">链友融财务数字一体化信息系统</div>
</el-form-item> </el-form-item>
<el-form-item prop="tenantName" v-if="tenantEnable"> <el-form-item prop="tenantName" v-if="tenantEnable">
<el-input v-model="loginForm.tenantName" type="text" size="small" auto-complete="off" placeholder='单位'> <el-input
<svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" /> v-model="loginForm.tenantName"
type="text"
size="small"
auto-complete="off"
placeholder="单位"
>
<svg-icon
slot="prefix"
icon-class="tree"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="small" auto-complete="off" placeholder="账号"> <el-input
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> v-model="loginForm.username"
type="text"
size="small"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" size="small" auto-complete="off" placeholder="密码"> <el-input
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> v-model="loginForm.password"
type="password"
size="small"
auto-complete="off"
placeholder="密码"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div class="login-btn"> <div class="login-btn">
<div class="btn-lf"> <div class="btn-lf">
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
</div> </div>
<div class="btn-rt"> <div class="btn-rt">
<el-button type="primary" @click.native.prevent="getCode" size="small" :loading="loading">登陆</el-button> <el-button
type="primary"
@click.native.prevent="getCode"
size="small"
:loading="loading"
>登陆</el-button
>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div class="forget-box"> <div class="forget-box">
<el-button type="text" @click="handleToRepass">忘记密码？</el-button> <el-button type="text" @click="handleToRepass"
>忘记密码？</el-button
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -45,7 +92,12 @@
</div> </div>
</div> </div>
<!-- 图形验证码 --> <!-- 图形验证码 -->
<Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}" @success="handleLogin" /> <Verify
ref="verify"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '400px', height: '200px' }"
@success="handleLogin"
/>
</div> </div>
</template> </template>
@ -56,21 +108,27 @@ import { SystemUserSocialTypeEnum } from "@/utils/constants";
import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi"; import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
import { import {
getPassword, getPassword,
getRememberMe, getTenantName, getRememberMe,
getTenantName,
getUsername, getUsername,
removePassword, removeRememberMe, removeTenantName, removePassword,
removeRememberMe,
removeTenantName,
removeUsername, removeUsername,
setPassword, setRememberMe, setTenantId, setTenantName, setPassword,
setUsername setRememberMe,
setTenantId,
setTenantName,
setUsername,
} from "@/utils/auth"; } from "@/utils/auth";
import Verify from '@/components/Verifition/Verify'; import Verify from "@/components/Verifition/Verify";
import { resetUserPwd } from "@/api/system/user"; import { resetUserPwd } from "@/api/system/user";
export default { export default {
name: "Login", name: "Login",
components: { components: {
Verify Verify,
}, },
data() { data() {
return { return {
@ -91,10 +149,10 @@ export default {
scene: 21, scene: 21,
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } { required: true, trigger: "blur", message: "请输入您的账号" },
], ],
password: [ password: [
{ required: true, trigger: "blur", message: "请输入您的密码" } { required: true, trigger: "blur", message: "请输入您的密码" },
], ],
code: [{ required: true, trigger: "change", message: "请输入验证码" }], code: [{ required: true, trigger: "change", message: "请输入验证码" }],
tenantName: [ tenantName: [
@ -102,20 +160,20 @@ export default {
{ {
validator: (rule, value, callback) => { validator: (rule, value, callback) => {
// debugger // debugger
getTenantIdByName(value).then(res => { getTenantIdByName(value).then((res) => {
const tenantId = res.data.id; const tenantId = res.data.id;
if (tenantId && tenantId >= 0) { if (tenantId && tenantId >= 0) {
// 设置租户 // 设置租户
setTenantId(tenantId) setTenantId(tenantId);
callback(); callback();
} else { } else {
callback('单位不存在'); callback("单位不存在");
} }
}); });
}, },
trigger: 'blur' trigger: "blur",
} },
] ],
}, },
loading: false, loading: false,
redirect: undefined, redirect: undefined,
@ -127,35 +185,38 @@ export default {
// 租户开关 // 租户开关
this.tenantEnable = getTenantEnable(); this.tenantEnable = getTenantEnable();
if (this.tenantEnable) { if (this.tenantEnable) {
getTenantIdByName(this.loginForm.tenantName).then(res => { // 设置租户 getTenantIdByName(this.loginForm.tenantName).then((res) => {
// 设置租户
const tenantId = res.data.id; const tenantId = res.data.id;
window.localStorage.setItem('cn', res.data.name) window.localStorage.setItem("cn", res.data.name);
if (tenantId && tenantId >= 0) { if (tenantId && tenantId >= 0) {
setTenantId(tenantId) setTenantId(tenantId);
} }
}); });
} }
// 验证码开关 // 验证码开关
this.captchaEnable = getCaptchaEnable(); this.captchaEnable = getCaptchaEnable();
// 重定向地址 // 重定向地址
this.redirect = this.$route.query.redirect ? decodeURIComponent(this.$route.query.redirect) : undefined; this.redirect = this.$route.query.redirect
console.log('this.redirect', this.redirect); ? decodeURIComponent(this.$route.query.redirect)
: undefined;
console.log("this.redirect", this.redirect);
this.getCookie(); this.getCookie();
}, },
methods: { methods: {
handleToRepass() { handleToRepass() {
this.$router.push("/rePassword") this.$router.push("/rePassword");
}, },
getCode() { getCode() {
// 情况一，未开启：则直接登录 // 情况一，未开启：则直接登录
if (!this.captchaEnable) { if (!this.captchaEnable) {
this.handleLogin({}) this.handleLogin({});
return; return;
} }
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码 // 弹出验证码
this.$refs.verify.show() this.$refs.verify.show();
}, },
getCookie() { getCookie() {
const username = getUsername(); const username = getUsername();
@ -171,29 +232,35 @@ export default {
}; };
}, },
handleLogin(captchaParams) { handleLogin(captchaParams) {
console.log('151131', captchaParams); // console.log("151131", captchaParams);
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true; this.loading = true;
// 设置 Cookie // 设置 Cookie
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
setUsername(this.loginForm.username) setUsername(this.loginForm.username);
setPassword(this.loginForm.password) setPassword(this.loginForm.password);
setRememberMe(this.loginForm.rememberMe) setRememberMe(this.loginForm.rememberMe);
setTenantName(this.loginForm.tenantName) setTenantName(this.loginForm.tenantName);
} else { } else {
removeUsername() removeUsername();
removePassword() removePassword();
removeRememberMe() removeRememberMe();
removeTenantName() removeTenantName();
} }
this.loginForm.captchaVerification = captchaParams.captchaVerification this.loginForm.captchaVerification =
captchaParams.captchaVerification;
// 发起登陆 // 发起登陆
// console.log("发起登录", this.loginForm); // console.log("发起登录", this.loginForm);
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => { this.$store
this.$router.push({ path: this.redirect || "/" }).catch(() => { .dispatch(
}); this.loginForm.loginType === "sms" ? "SmsLogin" : "Login",
}).catch(() => { this.loginForm
)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false; this.loading = false;
}); });
} }
@ -204,35 +271,47 @@ export default {
this.loading = true; this.loading = true;
let tenant = false; let tenant = false;
if (this.tenantEnable) { if (this.tenantEnable) {
await this.$prompt('请输入租户名称', "提示", { await this.$prompt("请输入租户名称", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消" cancelButtonText: "取消",
}).then(async ({ value }) => { })
await getTenantIdByName(value).then(res => { .then(async ({ value }) => {
await getTenantIdByName(value).then((res) => {
const tenantId = res.data.id; const tenantId = res.data.id;
window.localStorage.setItem('cn', res.data.name) window.localStorage.setItem("cn", res.data.name);
tenant = true tenant = true;
if (tenantId && tenantId >= 0) { if (tenantId && tenantId >= 0) {
setTenantId(tenantId) setTenantId(tenantId);
} }
}); });
}).catch(() => { })
.catch(() => {
// 取消登录按钮 loading状态 // 取消登录按钮 loading状态
this.loading = false; this.loading = false;
return false return false;
}); });
} else { } else {
tenant = true tenant = true;
} }
if (tenant) { if (tenant) {
// 计算 redirectUri // 计算 redirectUri
const redirectUri = location.origin + '/social-login?' const redirectUri =
+ encodeURIComponent('type=' + socialTypeEnum.type + '&redirect=' + (this.redirect || "/")); // 重定向不能丢 location.origin +
"/social-login?" +
encodeURIComponent(
"type=" +
socialTypeEnum.type +
"&redirect=" +
(this.redirect || "/")
); // 重定向不能丢
// const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback'; // const redirectUri = 'http://127.0.0.1:48080/api/gitee/callback';
// const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback'; // const redirectUri = 'http://127.0.0.1:48080/api/dingtalk/callback';
// 进行跳转 // 进行跳转
socialAuthRedirect(socialTypeEnum.type, encodeURIComponent(redirectUri)).then((res) => { socialAuthRedirect(
socialTypeEnum.type,
encodeURIComponent(redirectUri)
).then((res) => {
// console.log(res.url); // console.log(res.url);
window.location.href = res.data; window.location.href = res.data;
}); });
@ -241,10 +320,15 @@ export default {
/** ========== 以下为升级短信登录 ========== */ /** ========== 以下为升级短信登录 ========== */
getSmsCode() { getSmsCode() {
if (this.mobileCodeTimer > 0) return; if (this.mobileCodeTimer > 0) return;
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (!valid) return; if (!valid) return;
sendSmsCode(this.loginForm.mobile, this.scene, this.loginForm.uuid, this.loginForm.code).then(res => { sendSmsCode(
this.$modal.msgSuccess("获取验证码成功") this.loginForm.mobile,
this.scene,
this.loginForm.uuid,
this.loginForm.code
).then((res) => {
this.$modal.msgSuccess("获取验证码成功");
this.mobileCodeTimer = 60; this.mobileCodeTimer = 60;
let msgTimer = setInterval(() => { let msgTimer = setInterval(() => {
this.mobileCodeTimer = this.mobileCodeTimer - 1; this.mobileCodeTimer = this.mobileCodeTimer - 1;
@ -254,10 +338,10 @@ export default {
}, 1000); }, 1000);
}); });
}); });
} },
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/assets/styles/login.scss'; @import "~@/assets/styles/login.scss";
</style> </style>

Write Preview
Loading…
Cancel
Save