实现注册功能

Author: scholarli

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: "请输入您所属的租户" },
-    { min: 2, max: 20, message: "租户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请输入您所属的租户' },
+    { min: 2, max: 20, message: '租户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
   ],
   username: [
-    { required: true, trigger: "blur", message: "请输入您的账号" },
-    { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请输入您的账号' },
+    { 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: "请输入您的密码" },
-    { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
-    { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请输入您的密码' },
+    { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
+    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
   ],
   confirmPassword: [
-    { required: true, trigger: "blur", message: "请再次输入您的密码" },
-    { required: true, validator: equalToPassword, trigger: "blur" }
+    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
   ]
 }
 
@@ -148,59 +160,67 @@ const registerData = reactive({
   tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
   registerForm: {
     tenantName: '',
-    nickname: "芋艿",
-    tenantId:  0,
+    nickname: '',
+    tenantId: 0,
     username: '',
     password: '',
-    confirmPassword: "",
+    confirmPassword: '',
     captchaVerification: ''
   }
 })
 
-async function handleRegister() {
+async function handleRegister(params) {
   loading.value = true
-  await getTenantId()
-  registerData.registerForm.tenantId = authUtil.getTenantId()
+  try {
+    if (registerData.tenantEnable) {
+      await getTenantId()
+      registerData.registerForm.tenantId = authUtil.getTenantId()
+    }
+
+    if (registerData.captchaEnable) {
+      registerData.registerForm.captchaVerification = params.captchaVerification
+    }
 
-  LoginApi.register(registerData.registerForm).then(() => {
-  const username = registerData.registerForm.username;
-  ElMessageBox.alert("<font color='green'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
-      dangerouslyUseHTMLString: true,
-      type: "success",
-    }).then(async () => {
-      const res = await LoginApi.login(registerData.registerForm)
-      if (!res) {
-        return
-      }
-      loading.value = ElLoading.service({
-        lock: true,
-        text: '正在加载系统中...',
-        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()
+    console.log(
+      'registerData.registerForm.captchaVerification====',
+      registerData.registerForm.captchaVerification
+    )
+
+    const res = await LoginApi.register(registerData.registerForm)
+    if (!res) {
+      return
+    }
+    loading.value = ElLoading.service({
+      lock: true,
+      text: '正在加载系统中...',
+      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 })
+    }
+  } finally {
+    loginLoading.value = false
+    loading.value.close()
+  }
 }
 
 // 获取验证码
 const getCode = async () => {
-  // 情况一，未开启：则直接登录
+  // 情况一，未开启：则直接注册
   if (registerData.captchaEnable === 'false') {
-    await handleRegister()
+    await handleRegister({})
   } else {
-    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
+    // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行注册
     // 弹出验证码
     verify.value.show()
   }