refactor: handle 401 errors in staff and user data loading with logout headers

app/routes/_admin.lg-admin.tsx

@@ -1,9 +1,11 @@
 import { Outlet, redirect } from 'react-router'
+import { XiorError } from 'xior'
 
 import { getStaff } from '~/apis/admin/get-staff'
 import { AUTH_PAGES } from '~/configs/pages'
 import { AdminDefaultLayout } from '~/layouts/admin/default'
 import { handleCookie } from '~/libs/cookies'
+import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
 
 import type { Route } from './+types/_admin.lg-admin'
 
@@ -13,6 +15,19 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   const isAuthPage = AUTH_PAGES.includes(pathname)
   let staffData
 
+  if (staffToken) {
+    try {
+      const { data } = await getStaff({
+        accessToken: staffToken,
+      })
+      staffData = data
+    } catch (error) {
+      if (error instanceof XiorError && error.response?.status === 401) {
+        setStaffLogoutHeaders()
+      }
+    }
+  }
+
   if (!isAuthPage && !staffToken) {
     throw redirect('/lg-admin/login')
   }
@@ -21,13 +36,6 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     throw redirect('/lg-admin')
   }
 
-  if (staffToken) {
-    const { data } = await getStaff({
-      accessToken: staffToken,
-    })
-    staffData = data
-  }
-
   return {
     staffData,
   }

app/routes/_news.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from 'react-router'
+import { XiorError } from 'xior'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getSubscriptions } from '~/apis/common/get-subscriptions'
@@ -6,6 +7,7 @@ import { getUser } from '~/apis/news/get-user'
 import { NewsProvider } from '~/contexts/news'
 import { NewsDefaultLayout } from '~/layouts/news/default'
 import { handleCookie } from '~/libs/cookies'
+import { setUserLogoutHeaders } from '~/libs/logout-header.server'
 
 import type { Route } from './+types/_news'
 
@@ -13,10 +15,16 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   const { userToken } = await handleCookie(request)
   let userData
   if (userToken) {
-    const { data } = await getUser({
-      accessToken: userToken,
-    })
-    userData = data
+    try {
+      const { data } = await getUser({
+        accessToken: userToken,
+      })
+      userData = data
+    } catch (error) {
+      if (error instanceof XiorError && error.response?.status === 401) {
+        setUserLogoutHeaders()
+      }
+    }
   }
   const { data: subscriptionsData } = await getSubscriptions()
   const { data: categoriesData } = await getCategories()