BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 1a48301cee27a9e81b3086ea6bd69c7b61aa9e0b

Authored by YunaiV
1 parent 926c75d2

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

Inline Side-by-side
Showing 8 changed files with 65 additions and 37 deletions
yudao-ui-admin/.env.demo1024
  View file @1a48301
... ... @@ -17,6 +17,9 @@ VUE_APP_APP_NAME ='/admin-ui/'
17 17 # 多租户的开关
18 18 VUE_APP_TENANT_ENABLE = true
19 19  
  20 +# 验证码的开关
  21 +VUE_APP_CAPTCHA_ENABLE = true
  22 +
20 23 # 文档的开关
21 24 VUE_APP_DOC_ENABLE = true
22 25  
... ...
yudao-ui-admin/.env.dev
  View file @1a48301
... ... @@ -13,6 +13,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
13 13 # 多租户的开关
14 14 VUE_APP_TENANT_ENABLE = true
15 15  
  16 +# 验证码的开关
  17 +VUE_APP_CAPTCHA_ENABLE = true
  18 +
16 19 # 文档的开关
17 20 VUE_APP_DOC_ENABLE = true
18 21  
... ...
yudao-ui-admin/.env.local
  View file @1a48301
... ... @@ -14,6 +14,9 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
14 14 # 多租户的开关
15 15 VUE_APP_TENANT_ENABLE = true
16 16  
  17 +# 验证码的开关
  18 +VUE_APP_CAPTCHA_ENABLE = true
  19 +
17 20 # 文档的开关
18 21 VUE_APP_DOC_ENABLE = true
19 22  
... ...
yudao-ui-admin/.env.prod
  View file @1a48301
... ... @@ -15,6 +15,9 @@ VUE_APP_APP_NAME ='yudao-admin'
15 15 # 多租户的开关
16 16 VUE_APP_TENANT_ENABLE = true
17 17  
  18 +# 验证码的开关
  19 +VUE_APP_CAPTCHA_ENABLE = true
  20 +
18 21 # 文档的开关
19 22 VUE_APP_DOC_ENABLE = false
20 23  
... ...
yudao-ui-admin/.env.stage
  View file @1a48301
... ... @@ -15,6 +15,9 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/'
15 15 # 多租户的开关
16 16 VUE_APP_TENANT_ENABLE = true
17 17  
  18 +# 验证码的开关
  19 +VUE_APP_CAPTCHA_ENABLE = true
  20 +
18 21 # 文档的开关
19 22 VUE_APP_DOC_ENABLE = false
20 23  
... ...
yudao-ui-admin/src/utils/ruoyi.js
  View file @1a48301
... ... @@ -186,6 +186,19 @@ export function getTenantEnable() {
186 186 }
187 187  
188 188 /**
  189 + * 获得验证码功能是否开启
  190 + */
  191 +export function getCaptchaEnable() {
  192 + if (process.env.VUE_APP_CAPTCHA_ENABLE === "true") {
  193 + return true;
  194 + }
  195 + if (process.env.VUE_APP_CAPTCHA_ENABLE === "false") {
  196 + return false;
  197 + }
  198 + return process.env.VUE_APP_CAPTCHA_ENABLE || true;
  199 +}
  200 +
  201 +/**
189 202 * 获得文档是否开启
190 203 */
191 204 export function getDocEnable() {
... ...
yudao-ui-admin/src/views/login.vue
  View file @1a48301
... ... @@ -87,12 +87,11 @@
87 87 </div>
88 88 </div>
89 89 </div>
90   - <Verify
91   - ref="verify"
92   - :captcha-type="'blockPuzzle'"
93   - :img-size="{width:'400px',height:'200px'}"
94   - @success="handleLogin"
95   - />
  90 +
  91 + <!-- 图形验证码 -->
  92 + <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
  93 + @success="handleLogin" />
  94 +
96 95 <!-- footer -->
97 96 <div class="footer">
98 97 Copyright © 2020-2022 iocoder.cn All Rights Reserved.
... ... @@ -104,7 +103,7 @@
104 103 import {sendSmsCode, socialAuthRedirect} from "@/api/login";
105 104 import {getTenantIdByName} from "@/api/system/tenant";
106 105 import {SystemUserSocialTypeEnum} from "@/utils/constants";
107   -import {getTenantEnable} from "@/utils/ruoyi";
  106 +import {getCaptchaEnable, getTenantEnable} from "@/utils/ruoyi";
108 107 import {
109 108 getPassword,
110 109 getRememberMe, getTenantName,
... ... @@ -188,16 +187,21 @@ export default {
188 187 created() {
189 188 // 租户开关
190 189 this.tenantEnable = getTenantEnable();
  190 + // 验证码开关
  191 + this.captchaEnable = getCaptchaEnable();
191 192 // 重定向地址
192 193 this.redirect = this.$route.query.redirect;
193 194 this.getCookie();
194 195 },
195 196 methods: {
196 197 getCode() {
197   - // 只有开启的状态，才加载验证码。默认开启
  198 + // 情况一，未开启：则直接登录
198 199 if (!this.captchaEnable) {
  200 + this.handleLogin({})
199 201 return;
200 202 }
  203 +
  204 + // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
201 205 // 弹出验证码
202 206 this.$refs.verify.show()
203 207 },
... ... @@ -214,7 +218,7 @@ export default {
214 218 tenantName: tenantName ? tenantName : this.loginForm.tenantName,
215 219 };
216 220 },
217   - handleLogin(params) {
  221 + handleLogin(captchaParams) {
218 222 this.$refs.loginForm.validate(valid => {
219 223 if (valid) {
220 224 this.loading = true;
... ... @@ -230,7 +234,7 @@ export default {
230 234 removeRememberMe()
231 235 removeTenantName()
232 236 }
233   - this.loginForm.captchaVerification = params.captchaVerification
  237 + this.loginForm.captchaVerification = captchaParams.captchaVerification
234 238 // 发起登陆
235 239 // console.log("发起登录", this.loginForm);
236 240 this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
... ...
yudao-ui-admin/src/views/socialLogin.vue
  View file @1a48301
... ... @@ -32,20 +32,11 @@
32 32 <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
33 33 </el-input>
34 34 </el-form-item>
35   - <el-form-item prop="code" v-if="captchaEnable">
36   - <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
37   - @keyup.enter.native="handleLogin">
38   - <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
39   - </el-input>
40   - <div class="login-code">
41   - <img :src="codeUrl" @click="getCode" class="login-code-img"/>
42   - </div>
43   - </el-form-item>
44 35 <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
45 36 <!-- 下方的登录按钮 -->
46 37 <el-form-item style="width:100%;">
47 38 <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
48   - @click.native.prevent="handleLogin">
  39 + @click.native.prevent="getCode">
49 40 <span v-if="!loading">登 录</span>
50 41 <span v-else>登 录 中...</span>
51 42 </el-button>
... ... @@ -55,6 +46,11 @@
55 46 </div>
56 47 </div>
57 48 </div>
  49 +
  50 + <!-- 图形验证码 -->
  51 + <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}"
  52 + @success="handleLogin" />
  53 +
58 54 <!-- footer -->
59 55 <div class="footer">
60 56 Copyright © 2020-2022 iocoder.cn All Rights Reserved.
... ... @@ -72,10 +68,15 @@ import {
72 68 setRememberMe,
73 69 setUsername
74 70 } from "@/utils/auth";
75   -import {getCodeImg} from "@/api/login";
  71 +
  72 +import Verify from '@/components/Verifition/Verify';
  73 +import {getCaptchaEnable} from "@/utils/ruoyi";
76 74  
77 75 export default {
78 76 name: "ThirdLogin",
  77 + components: {
  78 + Verify
  79 + },
79 80 data() {
80 81 return {
81 82 codeUrl: "",
... ... @@ -85,8 +86,7 @@ export default {
85 86 username: "admin",
86 87 password: "admin123",
87 88 rememberMe: false,
88   - code: "",
89   - uuid: "",
  89 + captchaVerification: "",
90 90 },
91 91 loginRules: {
92 92 username: [
... ... @@ -114,9 +114,10 @@ export default {
114 114 // },
115 115 created() {
116 116 this.getCookie();
  117 + // 验证码开关
  118 + this.captchaEnable = getCaptchaEnable();
117 119 // 重定向地址
118 120 this.redirect = this.$route.query.redirect;
119   - this.getCode();
120 121 // 社交登录相关
121 122 this.type = this.$route.query.type;
122 123 this.code = this.$route.query.code;
... ... @@ -133,19 +134,15 @@ export default {
133 134 },
134 135 methods: {
135 136 getCode() {
136   - // 只有开启的状态，才加载验证码。默认开启
  137 + // 情况一，未开启：则直接登录
137 138 if (!this.captchaEnable) {
  139 + this.handleLogin({})
138 140 return;
139 141 }
140   - // 请求远程，获得验证码
141   - getCodeImg().then(res => {
142   - res = res.data;
143   - this.captchaEnable = res.enable;
144   - if (this.captchaEnable) {
145   - this.codeUrl = "data:image/gif;base64," + res.img;
146   - this.loginForm.uuid = res.uuid;
147   - }
148   - });
  142 +
  143 + // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
  144 + // 弹出验证码
  145 + this.$refs.verify.show()
149 146 },
150 147 getCookie() {
151 148 const username = getUsername();
... ... @@ -158,7 +155,7 @@ export default {
158 155 loginType: this.loginForm.loginType,
159 156 };
160 157 },
161   - handleLogin() {
  158 + handleLogin(captchaParams) {
162 159 this.$refs.loginForm.validate(valid => {
163 160 if (valid) {
164 161 this.loading = true;
... ... @@ -177,8 +174,7 @@ export default {
177 174 // 账号密码登录
178 175 username: this.loginForm.username,
179 176 password: this.loginForm.password,
180   - code: this.loginForm.code,
181   - uuid: this.loginForm.uuid,
  177 + captchaVerification: captchaParams.captchaVerification
182 178 }).then(() => {
183 179 this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
184 180 }).catch(() => {
... ...