refactor: exception handling and HTTP response in API

apps/api/src/app/exception.fliter.ts

@@ -5,20 +5,25 @@ import {
   HttpException,
 } from '@nestjs/common';
 
-import { Request, Response } from 'express';
-
 @Catch(HttpException)
 export class HttpExceptionFilter implements ExceptionFilter {
   catch(exception: HttpException, host: ArgumentsHost) {
     const ctx = host.switchToHttp();
-    const response = ctx.getResponse<Response>();
-    const request = ctx.getRequest<Request>();
+    const response = ctx.getResponse();
     const status = exception.getStatus();
-    const message = exception.getResponse() as any;
-    response.status(status).json({
-      code: status,
-      data: null,
+
+    const message = exception.message
+      ? exception.message
+      : `${status >= 500 ? 'Service Error' : 'Client Error'}`;
+
+    const errorResponse = {
+      data: {},
       message,
-    });
+      code: -1,
+    };
+
+    response.status(status);
+    response.header('Content-Type', 'application/json; charset=utf-8');
+    response.send(errorResponse);
   }
 }

apps/api/src/app/transform.interceptor.ts

@@ -14,8 +14,8 @@ export class TransformInterceptor implements NestInterceptor {
       map((data) => {
         return {
           data,
-          code: 200,
-          message: '',
+          code: 1,
+          message: 'Request successful',
         };
       }),
     );

apps/client/api/auth.ts

@@ -1,4 +1,5 @@
 import { type ErrorVo, isError } from "./common";
+import { http } from "./http";
 
 interface LoginDto {
   phone: string;
@@ -17,31 +18,13 @@ interface SignUpDto extends LoginDto {
 
 interface LoginVo {
   token: string;
-  user: UserInfo
+  user: UserInfo;
 }
 
 export async function login(dto: LoginDto) {
-  const message = useMessage();
-  const { data } = await useFetchPlus<LoginVo | ErrorVo>("/auth/login", {
-    body: dto,
-    method: "post",
-  });
-  if (isError(data.value)) {
-    message.error(data.value.message);
-    return;
-  }
-  return data.value as LoginVo;
+  return await http.post<LoginVo, LoginVo>("/auth/login", dto);
 }
 
 export async function signUp(dto: SignUpDto) {
-  const message = useMessage();
-  const { data } = await useFetchPlus<LoginVo | ErrorVo>("/auth/signup", {
-    body: dto,
-    method: "post",
-  });
-  if (isError(data.value)) {
-    message.error(data.value.message);
-    return;
-  }
-  return data.value as LoginVo;
+  return await http.post<LoginVo, LoginVo>("/auth/signup", dto);
 }

apps/client/api/courses.ts → apps/client/api/course.ts

@@ -8,3 +8,7 @@ export async function fetchCourse(courseId: number) {
 export async function fetchNextCourse(courseId: number) {
   return await http.get<Course, Course>(`/courses/${courseId}/next`);
 }
+
+export async function fetchCourses() {
+  return await http.get<Course[], Course[]>("/courses");
+}

apps/client/api/http.ts

@@ -1,5 +1,6 @@
 import type { AxiosInstance, AxiosResponse } from "axios";
 import axios from "axios";
+import { checkHaveToken, getToken } from "~/utils/token";
 
 const isProd = process.env.NODE_ENV === "production";
 
@@ -11,19 +12,35 @@ export const http: AxiosInstance = axios.create({
   headers: { "Content-Type": "application/json" },
 });
 
-// http.interceptors.request.use((config) => {
-//   if (checkHaveToken()) config.headers.Authorization = `Bearer ${getToken()}`;
+http.interceptors.request.use((config) => {
+  if (checkHaveToken()) config.headers.Authorization = `Bearer ${getToken()}`;
 
-//   return config;
-// });
+  return config;
+});
 
 http.interceptors.response.use(
   (response: AxiosResponse) => {
-    const { status, statusText, data } = response;
+    const { code, message, data } = response.data;
 
-    return data;
+    if (code === 1) {
+      return data;
+    } else {
+      console.error(message);
+      return Promise.reject(new Error(message));
+    }
   },
   (error) => {
-    // TODO 后面在统一处理
+    if (error.response.status) {
+      switch (error.response.status) {
+        case 400:
+          console.error(error.message);
+          break;
+        case 401:
+          // TODO 跳转到登录
+          console.error(error.message, "跳转到登录")
+          break;
+      }
+      return Promise.reject(error);
+    }
   }
 );

apps/client/pages/Courses.vue

@@ -29,14 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { useFetchPlus } from "~/composables/useFetch";
+import { fetchCourses } from '~/api/course';
 
-interface Course {
-  title: string;
-  id: number;
-}
-
-const { data: courses } = await useFetchPlus<Course[]>("/");
+const courses = await fetchCourses()
 
 
 </script>

apps/client/store/course.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { fetchCourse, fetchNextCourse } from "~/api/courses";
+import { fetchCourse, fetchNextCourse } from "~/api/course";
 
 interface Statement {
   id: number;

apps/client/utils/token.ts

@@ -0,0 +1,15 @@
+export function getToken() {
+  return localStorage.getItem('token')
+}
+
+export function checkHaveToken() {
+  return getToken()
+}
+
+export function setToken(token: string) {
+  localStorage.setItem('token', token)
+}
+
+export function cleanToken() {
+  localStorage.removeItem('token')
+}