huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 17:21:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

vue2 验证码，增加开关、修复对社交登录的支持

Browse Source
This commit is contained in:
YunaiV 2022-09-04 12:18:12 +08:00
parent 926c75d29a
commit 1a48301cee
8 changed files with 65 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
yudao-ui-admin/.env.demo1024
View File

@ -17,6 +17,9 @@ VUE_APP_APP_NAME ='/admin-ui/'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

3
yudao-ui-admin/.env.dev
View File

@ -13,6 +13,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

3
yudao-ui-admin/.env.local
View File

@ -14,6 +14,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = true

3
yudao-ui-admin/.env.prod
View File

@ -15,6 +15,9 @@ VUE_APP_APP_NAME ='yudao-admin'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = false

3
yudao-ui-admin/.env.stage
View File

@ -15,6 +15,9 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
# 多租户的开关
VUE_APP_TENANT_ENABLE = true
# 验证码的开关
VUE_APP_CAPTCHA_ENABLE = true
# 文档的开关
VUE_APP_DOC_ENABLE = false

13
yudao-ui-admin/src/utils/ruoyi.js
View File

@ -185,6 +185,19 @@ export function getTenantEnable() {
return process.env.VUE_APP_TENANT_ENABLE || true;
}
/**
* 获得验证码功能是否开启
*/
export function getCaptchaEnable() {
if (process.env.VUE_APP_CAPTCHA_ENABLE === "true") {
return true;
}
if (process.env.VUE_APP_CAPTCHA_ENABLE === "false") {
return false;
}
return process.env.VUE_APP_CAPTCHA_ENABLE || true;
}
/**
* 获得文档是否开启
*/

24
yudao-ui-admin/src/views/login.vue
View File

@ -87,12 +87,11 @@
</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" />
<!-- footer -->
<div class="footer">
Copyright © 2020-2022 iocoder.cn All Rights Reserved.
@ -104,7 +103,7 @@
import {sendSmsCode, socialAuthRedirect} from "@/api/login";
import {getTenantIdByName} from "@/api/system/tenant";
import {SystemUserSocialTypeEnum} from "@/utils/constants";
import {getTenantEnable} from "@/utils/ruoyi";
import {getCaptchaEnable, getTenantEnable} from "@/utils/ruoyi";
import {
getPassword,
getRememberMe, getTenantName,
@ -188,16 +187,21 @@ export default {
created() {
// 租户开关
this.tenantEnable = getTenantEnable();
// 验证码开关
this.captchaEnable = getCaptchaEnable();
// 重定向地址
this.redirect = this.$route.query.redirect;
this.getCookie();
},
methods: {
getCode() {
// 只有开启的状态，才加载验证码。默认开启
// 情况一，未开启：则直接登录
if (!this.captchaEnable) {
this.handleLogin({})
return;
}
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
this.$refs.verify.show()
},
@ -214,7 +218,7 @@ export default {
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
};
},
handleLogin(params) {
handleLogin(captchaParams) {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
@ -230,7 +234,7 @@ export default {
removeRememberMe()
removeTenantName()
}
this.loginForm.captchaVerification = params.captchaVerification
this.loginForm.captchaVerification = captchaParams.captchaVerification
// 发起登陆
// console.log("发起登录", this.loginForm);
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {

50
yudao-ui-admin/src/views/socialLogin.vue
View File

@ -32,20 +32,11 @@
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnable">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
@keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
<!-- 下方的登录按钮 -->
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin">
@click.native.prevent="getCode">
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
@ -55,6 +46,11 @@
</div>
</div>
</div>
<!-- 图形验证码 -->
<Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
@success="handleLogin" />
<!-- footer -->
<div class="footer">
Copyright © 2020-2022 iocoder.cn All Rights Reserved.
@ -72,10 +68,15 @@ import {
setRememberMe,
setUsername
} from "@/utils/auth";
import {getCodeImg} from "@/api/login";
import Verify from '@/components/Verifition/Verify';
import {getCaptchaEnable} from "@/utils/ruoyi";
export default {
name: "ThirdLogin",
components: {
Verify
},
data() {
return {
codeUrl: "",
@ -85,8 +86,7 @@ export default {
username: "admin",
password: "admin123",
rememberMe: false,
code: "",
uuid: "",
captchaVerification: "",
},
loginRules: {
username: [
@ -114,9 +114,10 @@ export default {
// },
created() {
this.getCookie();
// 验证码开关
this.captchaEnable = getCaptchaEnable();
// 重定向地址
this.redirect = this.$route.query.redirect;
this.getCode();
// 社交登录相关
this.type = this.$route.query.type;
this.code = this.$route.query.code;
@ -133,19 +134,15 @@ export default {
},
methods: {
getCode() {
// 只有开启的状态，才加载验证码。默认开启
// 情况一，未开启：则直接登录
if (!this.captchaEnable) {
this.handleLogin({})
return;
}
// 请求远程，获得验证码
getCodeImg().then(res => {
res = res.data;
this.captchaEnable = res.enable;
if (this.captchaEnable) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
}
});
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
this.$refs.verify.show()
},
getCookie() {
const username = getUsername();
@ -158,7 +155,7 @@ export default {
loginType: this.loginForm.loginType,
};
},
handleLogin() {
handleLogin(captchaParams) {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
@ -177,8 +174,7 @@ export default {
// 账号密码登录
username: this.loginForm.username,
password: this.loginForm.password,
code: this.loginForm.code,
uuid: this.loginForm.uuid,
captchaVerification: captchaParams.captchaVerification
}).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {