12

ruoyi-ui/.env.development

@@ -10,3 +10,6 @@ VUE_APP_BASE_API = '/dev-api'
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
+# 登录鉴别模式：ruoyi=默认登录；sms-2fa=互联网双因子（须与后端 login.auth-mode 一致）
+VUE_APP_LOGIN_AUTH_MODE = ruoyi
+

ruoyi-ui/.env.production

@@ -7,3 +7,6 @@ ENV = 'production'
 # 若依管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'
 
+# 登录鉴别模式：ruoyi=默认登录；sms-2fa=互联网双因子（须与后端 login.auth-mode 一致）
+VUE_APP_LOGIN_AUTH_MODE = ruoyi
+

ruoyi-ui/src/api/login.js

@@ -1,13 +1,16 @@
 import request from '@/utils/request'
 
-// 登录方法
-export function login(username, password, code, uuid) {
+// 登录方法（smsCode 为互联网双因子可选字段）
+export function login(username, password, code, uuid, smsCode) {
   const data = {
     username,
     password,
     code,
     uuid
   }
+  if (smsCode != null && String(smsCode).trim() !== '') {
+    data.smsCode = String(smsCode).trim()
+  }
   return request({
     url: '/login',
     headers: {
@@ -19,6 +22,19 @@ export function login(username, password, code, uuid) {
   })
 }
 
+// 发送登录短信验证码（须先填写账号与图形验证码）
+export function sendLoginSms(data) {
+  return request({
+    url: '/login/sms/send',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
 // 注册方法
 export function register(data) {
   return request({

ruoyi-ui/src/store/modules/user.js

@@ -49,8 +49,9 @@ const user = {
       const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
+      const smsCode = userInfo.smsCode
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, uuid, smsCode).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           store.dispatch('lock/unlockScreen')

ruoyi-ui/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
+      <h3 class="title">{{ title }}</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -23,7 +23,7 @@
           <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="captchaEnabled">
+      <el-form-item v-if="captchaEnabled" prop="code">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
@@ -34,9 +34,28 @@
           <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"/>
+          <img :src="codeUrl" class="login-code-img" @click="getCode">
         </div>
       </el-form-item>
+      <el-form-item v-if="sms2faEnabled" prop="smsCode">
+        <el-input
+          v-model="loginForm.smsCode"
+          auto-complete="off"
+          placeholder="短信验证码"
+          maxlength="6"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon slot="prefix" icon-class="message" class="el-input__icon input-icon" />
+        </el-input>
+        <el-button
+          class="login-sms-btn"
+          :disabled="smsSending || smsCountdown > 0"
+          @click="handleSendSms"
+        >
+          {{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
+        </el-button>
+      </el-form-item>
       <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
         <el-button
@@ -49,12 +68,11 @@
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
+        <div v-if="register" style="float: right;">
           <router-link class="link-type" :to="'/register'">立即注册</router-link>
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
     <div class="el-login-footer">
       <span>{{ footerContent }}</span>
     </div>
@@ -62,10 +80,12 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login"
+import { getCodeImg, sendLoginSms } from "@/api/login"
 import Cookies from "js-cookie"
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-import defaultSettings from '@/settings'
+import { encrypt, decrypt } from "@/utils/jsencrypt"
+import defaultSettings from "@/settings"
+
+const SMS_COUNTDOWN_SECONDS = 60
 
 export default {
   name: "Login",
@@ -79,28 +99,41 @@ export default {
         password: "admin123",
         rememberMe: false,
         code: "",
-        uuid: ""
-      },
-      loginRules: {
-        username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
-        ],
-        password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
-        ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        uuid: "",
+        smsCode: ""
       },
       loading: false,
-      // 验证码开关
       captchaEnabled: true,
-      // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      smsSending: false,
+      smsCountdown: 0,
+      smsTimer: null
+    }
+  },
+  computed: {
+    sms2faEnabled() {
+      const mode = (process.env.VUE_APP_LOGIN_AUTH_MODE || "ruoyi").trim().toLowerCase()
+      return mode === "sms-2fa" || mode === "sms_2fa"
+    },
+    loginRules() {
+      const rules = {
+        username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+        password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+      }
+      if (this.sms2faEnabled) {
+        rules.smsCode = [
+          { required: true, trigger: "blur", message: "请输入短信验证码" },
+          { pattern: /^\d{6}$/, trigger: "blur", message: "短信验证码为6位数字" }
+        ]
+      }
+      return rules
     }
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler(route) {
         this.redirect = route.query && route.query.redirect
       },
       immediate: true
@@ -110,6 +143,9 @@ export default {
     this.getCode()
     this.getCookie()
   },
+  beforeDestroy() {
+    this.clearSmsTimer()
+  },
   methods: {
     getCode() {
       getCodeImg().then(res => {
@@ -123,35 +159,104 @@ export default {
     getCookie() {
       const username = Cookies.get("username")
       const password = Cookies.get("password")
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm = {
-        username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      const rememberMe = Cookies.get("rememberMe")
+      this.loginForm.username = username === undefined ? this.loginForm.username : username
+      this.loginForm.password = password === undefined ? this.loginForm.password : decrypt(password)
+      this.loginForm.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
+    },
+    clearSmsTimer() {
+      if (this.smsTimer) {
+        clearInterval(this.smsTimer)
+        this.smsTimer = null
       }
     },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 })
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
-          } else {
-            Cookies.remove("username")
-            Cookies.remove("password")
-            Cookies.remove('rememberMe')
-          }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
-          }).catch(() => {
-            this.loading = false
-            if (this.captchaEnabled) {
-              this.getCode()
+    startSmsCountdown() {
+      this.clearSmsTimer()
+      this.smsCountdown = SMS_COUNTDOWN_SECONDS
+      this.smsTimer = setInterval(() => {
+        if (this.smsCountdown <= 1) {
+          this.smsCountdown = 0
+          this.clearSmsTimer()
+        } else {
+          this.smsCountdown -= 1
+        }
+      }, 1000)
+    },
+    validateFields(fieldNames) {
+      return new Promise((resolve, reject) => {
+        let validCount = 0
+        let hasError = false
+        if (!fieldNames.length) {
+          resolve()
+          return
+        }
+        fieldNames.forEach((field) => {
+          this.$refs.loginForm.validateField(field, (errorMessage) => {
+            if (errorMessage) {
+              hasError = true
+            }
+            validCount += 1
+            if (validCount === fieldNames.length) {
+              if (hasError) {
+                reject(new Error("validate failed"))
+              } else {
+                resolve()
+              }
             }
           })
+        })
+      })
+    },
+    handleSendSms() {
+      const fields = ["username"]
+      if (this.captchaEnabled) {
+        fields.push("code")
+      }
+      this.validateFields(fields)
+        .then(() => {
+          this.smsSending = true
+          return sendLoginSms({
+            username: this.loginForm.username.trim(),
+            code: this.loginForm.code,
+            uuid: this.loginForm.uuid
+          })
+        })
+        .then(() => {
+          this.$modal.msgSuccess("短信验证码已发送")
+          this.startSmsCountdown()
+        })
+        .catch(() => {
+          if (this.captchaEnabled) {
+            this.getCode()
+          }
+        })
+        .finally(() => {
+          this.smsSending = false
+        })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (!valid) {
+          return
         }
+        this.loading = true
+        if (this.loginForm.rememberMe) {
+          Cookies.set("username", this.loginForm.username, { expires: 30 })
+          Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
+          Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 })
+        } else {
+          Cookies.remove("username")
+          Cookies.remove("password")
+          Cookies.remove("rememberMe")
+        }
+        this.$store.dispatch("Login", this.loginForm).then(() => {
+          this.$router.push({ path: this.redirect || "/" }).catch(() => {})
+        }).catch(() => {
+          this.loading = false
+          if (this.captchaEnabled) {
+            this.getCode()
+          }
+        })
       })
     }
   }
@@ -191,11 +296,6 @@ export default {
     margin-left: 2px;
   }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
 .login-code {
   width: 33%;
   height: 38px;
@@ -205,6 +305,12 @@ export default {
     vertical-align: middle;
   }
 }
+.login-sms-btn {
+  width: 33%;
+  height: 38px;
+  float: right;
+  padding: 0 8px;
+}
 .el-login-footer {
   height: 40px;
   line-height: 40px;