实现注册功能

src/api/login/index.ts

@@ -1,6 +1,6 @@
 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 })
 }
 

src/views/Login/components/RegisterForm.vue

@@ -37,6 +37,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
@@ -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,27 +160,33 @@ const registerData = reactive({
   tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
   registerForm: {
     tenantName: '',
-    nickname: "芋艿",
+    nickname: '',
     tenantId: 0,
     username: '',
     password: '',
-    confirmPassword: "",
+    confirmPassword: '',
     captchaVerification: ''
   }
 })
 
-async function handleRegister() {
+async function handleRegister(params) {
   loading.value = true
+  try {
+    if (registerData.tenantEnable) {
       await getTenantId()
       registerData.registerForm.tenantId = authUtil.getTenantId()
+    }
 
-  LoginApi.register(registerData.registerForm).then(() => {
+    if (registerData.captchaEnable) {
-  const username = registerData.registerForm.username;
+      registerData.registerForm.captchaVerification = params.captchaVerification
-  ElMessageBox.alert("<font color='green'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
+    }
-      dangerouslyUseHTMLString: true,
+
-      type: "success",
+    console.log(
-    }).then(async () => {
+      'registerData.registerForm.captchaVerification====',
-      const res = await LoginApi.login(registerData.registerForm)
+      registerData.registerForm.captchaVerification
+    )
+
+    const res = await LoginApi.register(registerData.registerForm)
     if (!res) {
       return
     }
@@ -177,7 +195,9 @@ async function handleRegister() {
       text: '正在加载系统中...',
       background: 'rgba(0, 0, 0, 0.7)'
     })
+
     authUtil.removeLoginForm()
+
     authUtil.setToken(res)
     if (!redirect.value) {
       redirect.value = '/'
@@ -186,21 +206,21 @@ async function handleRegister() {
     if (redirect.value.indexOf('sso') !== -1) {
       window.location.href = window.location.href.replace('/login?redirect=', '')
     } else {
-        push({path: redirect.value || permissionStore.addRouters[0].path})
+      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()
   }