实现注册功能

b2dd1708 · scholar · 2205526a · b2dd1708 · b2dd1708
Commit b2dd1708 authored Sep 10, 2024 by scholar
Hide whitespace changes
Inline Side-by-side

Showing with 74 additions and 55 deletions

src/api/login/index.ts
+1 -2

src/views/Login/components/RegisterForm.vue
+73 -53

No files found.
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
 import request from '@/config/axios'
 import { getRefreshToken } from '@/utils/auth'
-import type {RegisterVO, UserLoginVO} from './types'
+import type { RegisterVO, UserLoginVO } from './types'
 export interface SmsCodeVO {
  mobile: string
@@ -19,7 +19,6 @@ export const login = (data: UserLoginVO) => {
 // 注册
 export const register = (data: RegisterVO) => {
-  console.log("data: RegisterVO=========",data)
  return request.post({ url: '/system/auth/register', data })
 }

--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -38,6 +38,16 @@
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
+        <el-form-item prop="username">
+          <el-input
+            v-model="registerData.registerForm.nickname"
+            placeholder="昵称"
+            size="large"
+            :prefix-icon="iconAvatar"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="password">
          <el-input
            v-model="registerData.registerForm.password"
@@ -86,7 +96,7 @@
  </el-form>
 </template>
 <script lang="ts" setup>
-import {ElLoading, ElMessageBox} from 'element-plus'
+import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { useIcon } from '@/hooks/web/useIcon'
@@ -110,35 +120,37 @@ const loginLoading = ref(false)
 const verify = ref()
 const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
 const equalToPassword = (rule, value, callback) => {
  if (registerData.registerForm.password !== value) {
-    callback(new Error("两次输入的密码不一致"));
+    callback(new Error('两次输入的密码不一致'))
  } else {
-    callback();
+    callback()
  }
-};
+}
 const registerRules = {
  tenantName: [
-    { required: true, trigger: "blur", message: "请输入您所属的租户" },
+    { required: true, trigger: 'blur', message: '请输入您所属的租户' },
-    { min: 2, max: 20, message: "租户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
  ],
  username: [
-    { required: true, trigger: "blur", message: "请输入您的账号" },
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { min: 4, max: 30, message: '用户账号长度必须介于 4 和 30 之间', trigger: 'blur' }
+  ],
+  nickname: [
+    { required: true, trigger: 'blur', message: '请输入您的昵称' },
+    { min: 0, max: 30, message: '昵称长度必须介于 0 和 30 之间', trigger: 'blur' }
  ],
  password: [
-    { required: true, trigger: "blur", message: "请输入您的密码" },
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
-    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
-    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
  ],
  confirmPassword: [
-    { required: true, trigger: "blur", message: "请再次输入您的密码" },
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
-    { required: true, validator: equalToPassword, trigger: "blur" }
+    { required: true, validator: equalToPassword, trigger: 'blur' }
  ]
 }
@@ -148,59 +160,67 @@ const registerData = reactive({
  tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
  registerForm: {
    tenantName: '',
-    nickname: "芋艿",
+    nickname: '',
-    tenantId:  0,
+    tenantId: 0,
    username: '',
    password: '',
-    confirmPassword: "",
+    confirmPassword: '',
    captchaVerification: ''
  }
 })
-async function handleRegister() {
+async function handleRegister(params) {
  loading.value = true
-  await getTenantId()
+  try {
-  registerData.registerForm.tenantId = authUtil.getTenantId()
+    if (registerData.tenantEnable) {
+      await getTenantId()
+      registerData.registerForm.tenantId = authUtil.getTenantId()
+    }
+    if (registerData.captchaEnable) {
+      registerData.registerForm.captchaVerification = params.captchaVerification
+    }
-  LoginApi.register(registerData.registerForm).then(() => {
+    console.log(
-  const username = registerData.registerForm.username;
+      'registerData.registerForm.captchaVerification====',
-  ElMessageBox.alert("<font color='green'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+      registerData.registerForm.captchaVerification
-      dangerouslyUseHTMLString: true,
+    )
-      type: "success",
-    }).then(async () => {
+    const res = await LoginApi.register(registerData.registerForm)
-      const res = await LoginApi.login(registerData.registerForm)
+    if (!res) {
-      if (!res) {
+      return
-        return
+    }
-      }
+    loading.value = ElLoading.service({
-      loading.value = ElLoading.service({
+      lock: true,
-        lock: true,
+      text: '正在加载系统中...',
-        text: '正在加载系统中...',
+      background: 'rgba(0, 0, 0, 0.7)'
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      authUtil.removeLoginForm()
-      authUtil.setToken(res)
-      if (!redirect.value) {
-        redirect.value = '/'
-      }
-      // 判断是否为SSO登录
-      if (redirect.value.indexOf('sso') !== -1) {
-        window.location.href = window.location.href.replace('/login?redirect=', '')
-      } else {
-        push({path: redirect.value || permissionStore.addRouters[0].path})
-      }
-      loginLoading.value = false
-      loading.value.close()
    })
-  })
+    authUtil.removeLoginForm()
+    authUtil.setToken(res)
+    if (!redirect.value) {
+      redirect.value = '/'
+    }
+    // 判断是否为SSO登录
+    if (redirect.value.indexOf('sso') !== -1) {
+      window.location.href = window.location.href.replace('/login?redirect=', '')
+    } else {
+      push({ path: redirect.value || permissionStore.addRouters[0].path })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
 }
 // 获取验证码
 const getCode = async () => {
-  // 情况一，未开启：则直接登录
+  // 情况一，未开启：则直接注册
  if (registerData.captchaEnable === 'false') {
-    await handleRegister()
+    await handleRegister({})
  } else {
-    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
    // 弹出验证码
    verify.value.show()
  }