fix: login and register error message issue

cypress/e2e/auth.cy.ts

@@ -22,7 +22,7 @@ describe('Auth', () => {
 
     it('should display error when submit an invalid form (password not match)', () => {
       cy.intercept('POST', /users\/login/, {
-        statusCode: 422,
+        statusCode: 403,
         body: { errors: { 'email or password': ['is invalid'] } },
       })
       cy.visit(ROUTES.LOGIN)

cypress/e2e/favorite.cy.ts

@@ -10,6 +10,10 @@ describe('Favorite', () => {
     cy.intercept('POST', /articles\/\S+\/favorite$/, { statusCode: 401, body: {} }).as('favoriteArticle')
     cy.visit(ROUTES.HOME)
 
+    Cypress.on('uncaught:exception', (err) => {
+      expect(err.message).to.contain('Need to login')
+      return false
+    })
     cy.get('i.ion-heart:first').click()
 
     cy.url().should('contain', 'login')

package.json

@@ -13,6 +13,7 @@
     "test:unit": "cypress open --component",
     "test:unit:ci": "cypress run --component --quiet --reporter spec",
     "test:e2e": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress open --e2e -c baseUrl=http://localhost:4137\"",
+    "test:e2e:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
     "test:e2e:ci": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress run --e2e -c baseUrl=http://localhost:4137\"",
     "test:e2e:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
     "test": "npm run test:unit:ci && npm run test:e2e:ci",

src/pages/Login.vue

@@ -62,7 +62,7 @@
 
 <script setup lang="ts">
 import { routerPush } from 'src/router'
-import { api } from 'src/services'
+import { api, isFetchError } from 'src/services'
 import type { LoginUser } from 'src/services/api'
 import { useUserStore } from 'src/store/user'
 import { reactive, ref } from 'vue'
@@ -82,12 +82,14 @@ const login = async () => {
 
   if (!formRef.value?.checkValidity()) return
 
+  try {
     const result = await api.users.login({ user: form })
-  if (result.ok) {
     updateUser(result.data.user)
     await routerPush('global-feed')
-  } else {
-    errors.value = await result.error
+  } catch (e) {
+    if (isFetchError(e)) {
+      errors.value = e.error?.errors
+    }
   }
 }
 

src/pages/Register.vue

@@ -69,7 +69,7 @@
 
 <script setup lang="ts">
 import { routerPush } from 'src/router'
-import { api } from 'src/services'
+import { api, isFetchError } from 'src/services'
 import type { NewUser } from 'src/services/api'
 import { useUserStore } from 'src/store/user'
 import { reactive, ref } from 'vue'
@@ -90,12 +90,14 @@ const register = async () => {
 
   if (!formRef.value?.checkValidity()) return
 
+  try {
     const result = await api.users.createUser({ user: form })
-  if (result.ok) {
     updateUser(result.data.user)
     await routerPush('global-feed')
-  } else {
-    errors.value = await result.error
+  } catch (e) {
+    if (isFetchError(e)) {
+      errors.value = e.error?.errors
+    }
   }
 }
 </script>

src/services/index.ts

@@ -1,3 +1,4 @@
+import type { GenericErrorModel, HttpResponse } from 'src/services/api'
 import { Api } from 'src/services/api'
 import { CONFIG } from 'src/config'
 
@@ -12,3 +13,7 @@ export function pageToOffset (page: number = 1, localLimit = limit): {limit: num
   const offset = (page - 1) * localLimit
   return { limit: localLimit, offset }
 }
+
+export function isFetchError<E = GenericErrorModel> (e: unknown): e is HttpResponse<unknown, E> {
+  return e instanceof Object && 'error' in e
+}

src/utils/use-async.ts

@@ -1,3 +1,5 @@
+import { routerPush } from 'src/router'
+import { isFetchError } from 'src/services'
 import type { Ref } from 'vue'
 import { ref } from 'vue'
 
@@ -11,9 +13,20 @@ export default function useAsync<T extends (...args: unknown[]) => unknown> (fn:
 
   const run: UseAsync<T>['run'] = async (...args) => {
     active.value = true
+    try {
       const result = await fn(...args)
-    active.value = false
       return result as ReturnType<T>
+    } catch (e) {
+      if (isFetchError(e)) {
+        if (e.status === 401) {
+          await routerPush('login')
+          throw new Error('Need to login first')
+        }
+      }
+      throw e
+    } finally {
+      active.value = false
+    }
   }
 
   return { active, run }