feat: error handler

src/components/alert/KUNGalgameMessage.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { watch, ref } from 'vue'
 import { Icon } from '@iconify/vue'
 
 // 导入设置面板 store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
 
 // 使用设置面板的 store
-const settingsStore = useKUNGalgameSettingsStore()
+const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
 
 const props = defineProps<{
   messageCN: string
@@ -13,10 +15,10 @@ const props = defineProps<{
   type: `warn` | `success` | `error` | `info`
 }>()
 
-const message =
-  settingsStore.showKUNGalgameLanguage === 'en'
-    ? props.messageEN
-    : props.messageCN
+const message = ref('')
+// 初始化
+message.value =
+  showKUNGalgameLanguage.value === 'en' ? props.messageEN : props.messageCN
 
 const messageClass = (type: string): string => {
   if (type === 'warn') {
@@ -31,6 +33,15 @@ const messageClass = (type: string): string => {
     return ''
   }
 }
+
+// 监听属性,实现响应式
+watch(
+  () => useKUNGalgameSettingsStore().showKUNGalgameLanguage,
+  () => {
+    message.value =
+      showKUNGalgameLanguage.value === 'en' ? props.messageEN : props.messageCN
+  }
+)
 </script>
 
 <template>

src/error/errorHandler.ts

@@ -0,0 +1,17 @@
+// 全局消息组件（顶部）
+import message from '@/components/alert/Message'
+import { getErrorMessageEN, getErrorMessageCN } from './errorI18n'
+
+const showMessage = (errorCode: number) => {
+  const messageType = 'error'
+  const messageTextEN = getErrorMessageEN(errorCode)
+  const messageTextCN = getErrorMessageCN(errorCode)
+  message(messageTextEN, messageTextCN, messageType)
+}
+
+/**
+ * KUNGalgame 已知错误处理函数，错误代码与后端协同
+ */
+export const kungalgameErrorHandler = (errorNumber: number) => {
+  showMessage(errorNumber)
+}

src/error/errorI18n.ts

@@ -0,0 +1,23 @@
+const errorMessagesEN: Record<number, string> = {
+  10101: 'User not found',
+  10102: 'User password error',
+  10103: 'Email verification code error',
+  10104: 'Email is already registered, please change it',
+  10105: 'Username is already registered, please change it',
+}
+
+const errorMessagesCN: Record<number, string> = {
+  10101: '用户未找到',
+  10102: '用户密码错误',
+  10103: '邮箱验证码错误',
+  10104: '邮箱已被注册，请更改',
+  10105: '用户名已被注册，请修改',
+}
+
+export const getErrorMessageEN = (errorCode: number) => {
+  return errorMessagesEN[errorCode] || 'Unknown server error'
+}
+
+export const getErrorMessageCN = (errorCode: number) => {
+  return errorMessagesCN[errorCode] || '未知的服务器错误'
+}

src/error/onRequestError.ts

@@ -5,8 +5,20 @@ import { generateTokenByRefreshTokenApi } from '@/api'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 // 导入路由
 import router from '@/router'
+// 导入已知错误处理函数
+import { kungalgameErrorHandler } from './errorHandler'
 
+interface ErrorResponseData {
+  code: number
+  message: string
+}
+
+/**
+ * 相当于拦截器，先根据可预见的状态码识别常见错误
+ * 再根据后端自定义的状态码识别错误，识别不了则抛出错误
+ */
 export async function onRequestError(response: Response) {
+  // 根据状态码识别错误
   if (response.status === 401) {
     // 尝试根据 refresh token 获取新的 token
     const accessTokenResponse = await generateTokenByRefreshTokenApi()
@@ -26,6 +38,7 @@ export async function onRequestError(response: Response) {
       useKUNGalgameUserStore().removeToken()
       router.push('/login')
     }
+    return
   }
 
   if (response.status === 404) {
@@ -34,9 +47,11 @@ export async function onRequestError(response: Response) {
       '资源未找到，请求地址出错',
       'error'
     )
+    return
   }
 
-  if (response.status === 500) {
-    message('Internal Server Error', '服务器错误', 'error')
-  }
+  // 获取错误响应体数据
+  const data: ErrorResponseData = await response.json()
+  // 处理已知错误
+  kungalgameErrorHandler(data.code)
 }

src/language/en.ts

@@ -220,7 +220,6 @@ export default {
       leave: 'Confirm leaving the page? Your changes will not be saved.',
     },
     login: {
-      success: 'Login Successfully! Welcome to KUN Visual Novel ~ ',
       invalidUsername:
         'Invalid username. Username should be 1 to 17 characters long and can include: Chinese characters, English letters, numbers, underscore, and tilde (~)',
       invalidPassword:

src/language/zh.ts

@@ -218,7 +218,6 @@ export default {
       leave: '确认离开界面吗？您的更改将不会保存',
     },
     login: {
-      login: '登陆成功!欢迎来到 鲲 Galgame ~ ',
       invalidUsername:
         '非法的用户名，用户名为 1 到 17 位，可以包含：中文、英文、数字、下划线、波浪线',
       invalidPassword:

src/utils/request.ts

@@ -28,8 +28,12 @@ const kunFetchRequest = async <T>(
 
   const response = await fetch(fullUrl, { ...options, headers })
 
-  // 处理错误，token 过期
-  await onRequestError(response)
+  // 后端的一切正常响应都被设为 200 了
+  if (response.status != 200) {
+    // 处理错误，token 过期
+    await onRequestError(response)
+    throw new Error('KUNGalgame Fetch Error occurred, but no problem')
+  }
 
   const data: T = await response.json()
   return data

src/views/login/components/Login.vue

@@ -89,7 +89,12 @@ const handleLogin = () => {
     // 如果请求成功跳转到主页
     if (res.code === 200) {
       router.push('/')
-      info.info(tm('AlertInfo.login.success'))
+      message(
+        'Login Successfully! Welcome to KUN Visual Novel ~ ',
+        '登陆成功!欢迎来到 鲲 Galgame ~ ',
+        'success',
+        5000
+      )
     }
   })
 }