feat: sms login

src/api/base/login.ts

@@ -38,6 +38,17 @@ export function getAsyncRoutes() {
   return defHttp.get({ url: Api.GetAsyncRoutes })
 }
 
+// 获取登录验证码
+export function sendSmsCode(mobile, scene) {
+  return defHttp.post({
+    url: '/system/auth/send-sms-code',
+    data: {
+      mobile,
+      scene
+    }
+  })
+}
+
 // 获取验证图片  以及token
 export function getCaptcha(data) {
   return defHttp.post({ url: Api.GetCaptcha, data }, { isReturnNativeResponse: true })

src/api/base/model/userModel.ts

@@ -7,6 +7,14 @@ export interface LoginParams {
   captchaVerification: string
 }
 
+/**
+ * @description: SmsLogin interface parameters
+ */
+export interface SmsLoginParams {
+  mobile: number
+  code: number
+}
+
 /**
  * @description: Login interface return value
  */

src/api/base/user.ts

@@ -1,11 +1,12 @@
 import { defHttp } from '@/utils/http/axios'
-import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'
+import { LoginParams, LoginResultModel, GetUserInfoModel, SmsLoginParams } from './model/userModel'
 
 import { ErrorMessageMode } from '@/types/axios'
 
 enum Api {
   Login = '/system/auth/login',
   Logout = '/system/auth/logout',
+  SmsLogin = '/system/auth/sms-login',
   GetUserInfo = '/system/auth/get-permission-info'
 }
 
@@ -13,15 +14,14 @@ enum Api {
  * @description: user login api
  */
 export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
-  return defHttp.post<LoginResultModel>(
-    {
-      url: Api.Login,
-      params
-    },
-    {
-      errorMessageMode: mode
-    }
-  )
+  return defHttp.post<LoginResultModel>({ url: Api.Login, params }, { errorMessageMode: mode })
+}
+
+/**
+ * @description: user smslogin api
+ */
+export function smsLogin(params: SmsLoginParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<LoginResultModel>({ url: Api.SmsLogin, params }, { errorMessageMode: mode })
 }
 
 /**

src/store/modules/user.ts

@@ -13,8 +13,8 @@ import { usePermissionStore } from '@/store/modules/permission'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { getAuthCache, setAuthCache } from '@/utils/auth'
-import { doLogout, getUserInfo, loginApi } from '@/api/base/user'
-import { GetUserInfoModel, LoginParams } from '@/api/base/model/userModel'
+import { doLogout, getUserInfo, loginApi, smsLogin } from '@/api/base/user'
+import { GetUserInfoModel, LoginParams, SmsLoginParams } from '@/api/base/model/userModel'
 
 import { isArray } from '@/utils/is'
 
@@ -110,6 +110,24 @@ export const useUserStore = defineStore('app-user', {
         return Promise.reject(error)
       }
     },
+    async smsLogin(
+      params: SmsLoginParams & {
+        goHome?: boolean
+        mode?: ErrorMessageMode
+      }
+    ): Promise<GetUserInfoModel | null> {
+      try {
+        const { goHome = true, mode, ...smsLoginParams } = params
+        const data = await smsLogin(smsLoginParams, mode)
+        const { accessToken, refreshToken } = data
+        // save token
+        this.setAccessToken(accessToken)
+        this.setRefreshToken(refreshToken)
+        return this.afterLoginAction(goHome)
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
     async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {
       if (!this.getAccessToken) return null
       // get user info

src/views/base/login/MobileForm.vue

@@ -2,15 +2,31 @@
   <div v-if="getShow">
     <LoginFormTitle class="enter-x" />
     <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="tenantName" class="enter-x">
+        <Input
+          v-if="tenantEnable === 'true'"
+          size="large"
+          v-model:value="formData.tenantName"
+          :placeholder="t('sys.login.tenantName')"
+          class="fix-auto-fill"
+        />
+      </FormItem>
       <FormItem name="mobile" class="enter-x">
         <Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" class="fix-auto-fill" />
       </FormItem>
-      <FormItem name="sms" class="enter-x">
-        <CountdownInput size="large" class="fix-auto-fill" v-model:value="formData.sms" :placeholder="t('sys.login.smsCode')" />
+      <FormItem name="mobileCode" class="enter-x">
+        <CountdownInput
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.mobileCode"
+          :count="mobileCodeTimer"
+          :sendCodeApi="getSmsCode"
+          :placeholder="t('sys.login.smsCode')"
+        />
       </FormItem>
 
       <FormItem class="enter-x">
-        <Button type="primary" size="large" block @click="handleLogin" :loading="loading">
+        <Button type="primary" size="large" block @click="getCode" :loading="loading">
           {{ t('sys.login.loginButton') }}
         </Button>
         <Button size="large" block class="mt-4" @click="handleBackLogin">
@@ -18,6 +34,7 @@
         </Button>
       </FormItem>
     </Form>
+    <Verify ref="verify" mode="pop" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" @success="handleLogin" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -26,27 +43,106 @@ import { Form, Input, Button } from 'ant-design-vue'
 import { CountdownInput } from '@/components/CountDown'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useUserStore } from '@/store/modules/user'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useGlobSetting } from '@/hooks/setting'
 import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'
+import { useDesign } from '@/hooks/web/useDesign'
+import * as authUtil from '@/utils/auth'
+
+import { Verify } from '@/components/Verifition'
+import { getTenantIdByName, sendSmsCode } from '@/api/base/login'
 
 const FormItem = Form.Item
+
 const { t } = useI18n()
+const { prefixCls } = useDesign('login')
+const { createMessage, notification, createErrorModal } = useMessage()
 const { handleBackLogin, getLoginState } = useLoginState()
+const { tenantEnable, captchaEnable } = useGlobSetting()
 const { getFormRules } = useFormRules()
+const userStore = useUserStore()
+const permissionStore = usePermissionStore()
 
 const formRef = ref()
 const loading = ref(false)
 
+const mobileCodeTimer = ref(0)
+const scene = ref(21)
+
+const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+
 const formData = reactive({
+  tenantName: '芋道源码',
   mobile: '',
-  sms: ''
+  mobileCode: '',
+  captchaVerification: ''
 })
 
 const { validForm } = useFormValid(formRef)
 
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
 
+// 获取验证码
+async function getCode() {
+  // 情况一，未开启：则直接登录
+  if (captchaEnable === 'false') {
+    await handleLogin()
+  } else {
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+    // 弹出验证码
+    verify.value.show()
+  }
+}
+
+//获取租户ID
+async function getTenantId() {
+  if (tenantEnable === 'true') {
+    const res = await getTenantIdByName(formData.tenantName)
+    authUtil.setTenantId(res)
+  }
+}
+
 async function handleLogin() {
   const data = await validForm()
   if (!data) return
+  try {
+    loading.value = true
+    const userInfo = await userStore.smsLogin({
+      mobile: data.mobile,
+      code: data.mobileCode,
+      mode: 'none' //不要默认的错误提示
+    })
+    if (userInfo) {
+      await permissionStore.changePermissionCode(userInfo.permissions)
+      notification.success({
+        message: t('sys.login.loginSuccessTitle'),
+        description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.user.nickname}`,
+        duration: 3
+      })
+    }
+  } catch (error) {
+    createErrorModal({
+      title: t('sys.api.errorTip'),
+      content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
+      getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+async function getSmsCode() {
+  await getTenantId()
+  if (mobileCodeTimer.value > 0) return
+  const data = await validForm()
+  if (!data) return
+  const res = await sendSmsCode(formData.mobile, scene.value)
+  if (res) {
+    createMessage.success(t('common.successText'))
+    mobileCodeTimer.value = 60
+  }
 }
 </script>