feat: 增加message错误提示

ZiqiangStudio · Apr 20, 2023 · d859926 · d859926
1 parent 2db0e7b
commit d859926
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 40 deletions.
diff --git a/pages/certify-pending.vue b/pages/certify-pending.vue
@@ -10,6 +10,8 @@
   <p class="action"><nuxt-link to="/register">无法访问武大邮箱？</nuxt-link></p>
 </template>
 <script lang="ts" setup>
+import MMessage from 'vue-m-message';
+
 const route = useRoute();
 const id = route.params.id?.toString() ?? '';
 
@@ -38,11 +40,15 @@ function submit(e: Event) {
   e.preventDefault();
   request<CertifyRes>(`/api/users/${id}/certify/`, {
     method: 'GET',
-  }).then((res) => {
-    if (res.data.is_certified) {
-      location.href = '/';
-    }
-  });
+  })
+    .then((res) => {
+      if (res.data.is_certified) {
+        location.href = '/';
+      }
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
+    });
 }
 
 interface SendRes {

diff --git a/pages/certify.vue b/pages/certify.vue
@@ -19,6 +19,7 @@
 <script lang="ts" setup>
 import User from 'assets/icon/user.svg?component';
 import Message from 'assets/icon/message.svg?component';
+import MMessage from 'vue-m-message';
 
 const image = isDark ? '/image/certify-dark.svg' : '/image/certify.svg';
 
@@ -64,6 +65,9 @@ function submit(e: Event) {
     })
     .then(() => {
       router.push(`/certify-pending?id=${id}`);
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
     });
 }
 </script>

diff --git a/pages/register.vue b/pages/register.vue
@@ -8,7 +8,7 @@
         required
         maxlength="16"
         minlength="4"
-        pattern="^[a-zA-Z0-9_-]{4,16}$"
+        pattern="[a-zA-Z0-9_\-]+"
         placeholder="请输入用户名"
         :custom-rule="usernameRule"
       >
@@ -24,7 +24,7 @@
         minlength="11"
         maxlength="11"
         type="tel"
-        pattern="[0-9]+"
+        pattern="1[3-9]\d+"
         placeholder="请输入手机号"
       >
         <template #prefix>
@@ -57,7 +57,7 @@
         type="password"
         maxlength="18"
         minlength="6"
-        pattern="^[a-zA-Z0-9_-]{6,18}$"
+        pattern="[a-zA-Z0-9_\-]+"
         placeholder="请输入密码"
       >
         <template #prefix>
@@ -71,7 +71,7 @@
         type="password"
         maxlength="18"
         minlength="6"
-        pattern="^[a-zA-Z0-9_-]{6,18}$"
+        pattern="[a-zA-Z0-9_\-]+"
         placeholder="请再次输入密码"
         :custom-rule="confirmedPasswordRule"
       >
@@ -92,6 +92,7 @@ import Lock from 'assets/icon/lock.svg?component';
 import Message from 'assets/icon/message.svg?component';
 import User from 'assets/icon/user.svg?component';
 import Phone from 'assets/icon/phone.svg?component';
+import MMessage from 'vue-m-message';
 
 const username = ref('');
 const phone = ref('');
@@ -126,12 +127,16 @@ function submit(e: Event) {
       code: sms.value,
       password: password.value,
     },
-  }).then((res) => {
-    localStorage.setItem('access', res.data.access);
-    localStorage.setItem('exp', res.data.expire_time);
-    localStorage.setItem('refresh', res.data.refresh);
-    router.push(`/certify?id=${res.data.id}`);
-  });
+  })
+    .then((res) => {
+      localStorage.setItem('access', res.data.access);
+      localStorage.setItem('exp', res.data.expire_time);
+      localStorage.setItem('refresh', res.data.refresh);
+      router.push(`/certify?id=${res.data.id}`);
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
+    });
 }
 
 const phoneInputRef = ref<InstanceType<typeof ZInput> | null>(null);
@@ -147,15 +152,19 @@ function sendMessage(e: Event) {
     body: {
       phone: phone.value,
     },
-  }).then((res) => {
-    messageTimeout.value = 60;
-    intervalId = setInterval(() => {
-      messageTimeout.value -= 1;
-      if (messageTimeout.value === 0) {
-        clearInterval(intervalId);
-      }
-    }, 1000);
-  });
+  })
+    .then((res) => {
+      messageTimeout.value = 60;
+      intervalId = setInterval(() => {
+        messageTimeout.value -= 1;
+        if (messageTimeout.value === 0) {
+          clearInterval(intervalId);
+        }
+      }, 1000);
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
+    });
 }
 
 function usernameRule(value: string) {

diff --git a/pages/reset.vue b/pages/reset.vue
@@ -31,7 +31,7 @@
       v-model="password"
       maxlength="18"
       minlength="6"
-      pattern="^[a-zA-Z0-9_-]{6,18}$"
+      pattern="[a-zA-Z0-9_\-]+"
       type="password"
       label="新密码"
       required
@@ -48,7 +48,7 @@
       minlength="6"
       required
       type="password"
-      pattern="^[a-zA-Z0-9_-]{6,18}$"
+      pattern="[a-zA-Z0-9_\-]+"
       placeholder="请再次输入新密码"
       :custom-rule="confirmedPasswordRule"
     >
@@ -63,6 +63,7 @@
 import Lock from 'assets/icon/lock.svg?component';
 import Message from 'assets/icon/message.svg?component';
 import Phone from 'assets/icon/phone.svg?component';
+import MMessage from 'vue-m-message';
 
 const router = useRouter();
 
@@ -82,9 +83,13 @@ function submit(e: Event) {
       code: sms.value,
       password: password.value,
     },
-  }).then(() => {
-    router.back();
-  });
+  })
+    .then(() => {
+      router.back();
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
+    });
 }
 
 const phoneInputRef = ref<HTMLInputElement | null>(null);
@@ -100,15 +105,19 @@ function sendMessage(e: Event) {
     body: {
       phone: phone.value,
     },
-  }).then(() => {
-    messageTimeout.value = 60;
-    intervalId = setInterval(() => {
-      messageTimeout.value -= 1;
-      if (messageTimeout.value === 0) {
-        clearInterval(intervalId);
-      }
-    }, 1000);
-  });
+  })
+    .then(() => {
+      messageTimeout.value = 60;
+      intervalId = setInterval(() => {
+        messageTimeout.value -= 1;
+        if (messageTimeout.value === 0) {
+          clearInterval(intervalId);
+        }
+      }, 1000);
+    })
+    .catch((err) => {
+      MMessage.error(err.data.msg);
+    });
 }
 
 function confirmedPasswordRule(value: string) {

diff --git a/utils/request.ts b/utils/request.ts
@@ -1,3 +1,5 @@
+import MMessage from 'vue-m-message';
+
 interface RefreshRes {
   access: string;
   expire_time: string;
@@ -14,9 +16,10 @@ export async function request<T>(url: string, options: RequestOptions) {
   const refresh = localStorage.getItem('refresh');
   const exp = localStorage.getItem('exp');
   if (!access || !exp) return;
+  const router = useRouter();
   if (Date.now() > new Date(exp).getTime()) {
     try {
-      const res = await $fetch<ResBody<RefreshRes>>('/auth/refresh/', {
+      const res = await $fetch<ResBody<RefreshRes>>('/api/auth/refresh/', {
         method: 'POST',
         body: {
           refresh,
@@ -26,7 +29,10 @@ export async function request<T>(url: string, options: RequestOptions) {
       localStorage.setItem('exp', res.data.expire_time);
       access = res.data.access;
     } catch (err) {
-      throw new Error('Refresh expired');
+      MMessage.error('登录凭证过期，请重新登录');
+      setTimeout(() => {
+        router.push('/login');
+      }, 1500);
     }
   }
   return $fetch<ResBody<T>>(url, {