添加了验证码图片支持也验证码前端校验

src/store/authentication.js

@@ -31,7 +31,6 @@ const actions = {
 
 const getters = {
     isAuthenticated: (state) => state.isAuthenticated,
-    user: (state) => state.user,
     token: (state) => state.token,
 };
 

src/views/authentication/Register.vue

@@ -9,7 +9,9 @@ const username = ref('');
 const phoneNumber = ref('');
 const password = ref('');
 const verificationCode = ref('');
+const correctCode = ref('');
 const router = useRouter();
+const verificationCodeImage = ref('');
 
 const handleRegister = async () => {
   console.log('Registering with', {
@@ -18,6 +20,10 @@ const handleRegister = async () => {
     password: password.value,
     verificationCode: verificationCode.value
   });
+  if (verificationCode.value!==correctCode.value){
+    await ElMessageBox.alert("验证码错误");
+    return
+  }
 
   try {
     const response = await axios.post('/api/register', {
@@ -38,20 +44,19 @@ const handleRegister = async () => {
   }
 };
 
-const sendVerificationCode = async () => {
+const getVerificationCode = async () => {
   try {
-    const response = await axios.post('/api/sendVerificationCode', {
-      phoneNumber: phoneNumber.value,
-    });
+    const response = await axios.get('/api/getVerificationCode');
 
     if (response.status === 200) {
-      verificationCode.value = response.data.code;
-      ElMessage.success('验证码已发送');
+      verificationCodeImage.value = '/api/'+response.data.path; // 更新验证码图片路径
+      correctCode.value = response.data.code;
+      ElMessage.success('验证码已获取');
     } else {
-      ElMessage.error('发送验证码失败，请稍后再试');
+      ElMessage.error('获取验证码失败，请稍后再试');
     }
   } catch (error) {
-    ElMessage.error('发送验证码失败，请稍后再试');
+    ElMessage.error('获取验证码失败，请稍后再试');
   }
 };
 </script>
@@ -77,10 +82,13 @@ const sendVerificationCode = async () => {
           <label for="verificationCode">验证码</label>
           <ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
             <template #append>
-              <ElButton type="primary" @click="sendVerificationCode" class="verification-button">获取验证码</ElButton>
+              <ElButton type="primary" @click="getVerificationCode" class="verification-button">获取验证码</ElButton>
             </template>
           </ElInput>
         </ElFormItem>
+        <ElFormItem v-if="verificationCodeImage">
+          <img :src="verificationCodeImage" alt="验证码" />
+        </ElFormItem>
         <ElFormItem>
           <ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
         </ElFormItem>