重构 api 调用操作 & 增加 token 刷新

src/App.vue

@@ -10,6 +10,9 @@ const theme: GlobalThemeOverrides = {
     color: '#fff',
   },
 };
+
+const { refresh } = useAuth();
+refresh();
 </script>
 
 <template>

src/api/auth.ts

@@ -31,16 +31,11 @@ export const apiAuth = {
   },
 
   async update(username: string, password: string) {
-    const message = useMessage();
-    if (password.length < 8) {
-      message.error('Password must be at least 8 characters long!');
-    } else {
-      const { data } = await axios.post<Update>('api/v1/auth/update', {
-        username,
-        password,
-      });
+    const { data } = await axios.post<Update>('api/v1/auth/update', {
+      username,
+      password,
+    });
 
-      return data;
-    }
+    return data;
   },
 };

src/hooks/useApi.ts

@@ -33,9 +33,9 @@ export function useApi<
 
         if (options?.failRule && options.failRule(res)) {
           options.message?.fail && message.error(options.message.fail);
+        } else {
+          options?.message?.success && message.success(options.message.success);
         }
-
-        options?.message?.success && message.success(options.message.success);
       })
       .catch((err: TError) => {
         fetchError.trigger(err);

src/hooks/useAuth.ts

@@ -12,12 +12,12 @@ export const useAuth = createSharedComposable(() => {
 
   const isLogin = computed(() => auth.value !== '');
 
-  const clearUser = () => {
+  function clearUser() {
     user.username = '';
     user.password = '';
-  };
+  }
 
-  const check = () => {
+  function check() {
     if (user.username === '') {
       message.warning('Please Enter Username!');
       return false;
@@ -29,53 +29,82 @@ export const useAuth = createSharedComposable(() => {
     }
 
     return true;
-  };
+  }
 
-  const login = async () => {
-    try {
-      if (check()) {
-        const res = await apiAuth.login(user.username, user.password);
-        auth.value = `${res.token_type} ${res.access_token}`;
-        clearUser();
-        message.success('Login Success!');
-      }
-    } catch (err) {
+  function login() {
+    const { execute, onResult, onError } = useApi(apiAuth.login, {
+      message: {
+        success: 'Login Success!',
+      },
+    });
+
+    onResult((res) => {
+      auth.value = `${res.token_type} ${res.access_token}`;
+      clearUser();
+    });
+
+    onError((err) => {
       const error = err as ApiError;
       message.error(error.detail);
+    });
+
+    if (check()) {
+      execute(user.username, user.password);
     }
-  };
+  }
 
-  const logout = async () => {
-    const res = await apiAuth.logout();
-    if (res) {
-      clearUser();
-      auth.value = '';
-      message.success('Logout Success!');
-    } else {
-      message.error('Logout Failed!');
+  const { execute: logout, onResult: onLogoutResult } = useApi(apiAuth.logout, {
+    failRule: (res) => !res,
+    message: {
+      success: 'Logout Success!',
+      fail: 'Logout Failed!',
+    },
+  });
+
+  onLogoutResult(() => {
+    clearUser();
+    auth.value = '';
+  });
+
+  const { execute: refresh, onResult: onRefreshResult } = useApi(
+    apiAuth.refresh,
+    {
+      message: {
+        success: 'Refresh Success!',
+      },
     }
-  };
+  );
 
-  const refresh = () => {
-    apiAuth.refresh();
-  };
+  onRefreshResult((res) => {
+    auth.value = `${res.token_type} ${res.access_token}`;
+  });
 
-  const update = async () => {
-    try {
-      const res = await apiAuth.update(user.username, user.password);
+  function update() {
+    const { execute, onResult } = useApi(apiAuth.update, {
+      failRule: (res) => res.message !== 'update success',
+      message: {
+        success: 'Update Success!',
+        fail: 'Update Failed!',
+      },
+    });
 
-      if (res?.message === 'update success') {
+    onResult((res) => {
+      if (res.message === 'update success') {
         auth.value = `${res.token_type} ${res.access_token}`;
-        message.success('Update Success!');
         clearUser();
       } else {
-        message.error('Update Failed!');
         user.password = '';
       }
-    } catch (error) {
-      message.error('Update Failed!');
+    });
+
+    if (check()) {
+      if (user.password.length < 8) {
+        message.error('Password must be at least 8 characters long!');
+      } else {
+        execute(user.username, user.password);
+      }
     }
-  };
+  }
 
   return {
     auth,