updated auth/error handling

.idea/workspace.xml

@@ -127,7 +127,7 @@
       <workItem from="1673397538637" duration="47416000" />
       <workItem from="1673508732689" duration="1316000" />
       <workItem from="1673547794038" duration="2346000" />
-      <workItem from="1743904898331" duration="10658000" />
+      <workItem from="1743904898331" duration="11972000" />
     </task>
     <servers />
   </component>

src/pages/lists/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="p-5 sm:p-0">
+    <div v-if="lists.length < 1">
+      <p>No lists found</p>
+    </div>
     <ul class="grid grid-cols-2 gap-3 mt-5">
       <li v-for="list in lists" class="movie-card neon-border p-5 rounded">
         <div class="grid grid-rows-2 gap-3">
@@ -19,17 +22,20 @@ import type { MovieList } from "~/types/movielist";
 const lists = defineModel<MovieList[]>("movie_list", { default: [] });
 const updateLists = async function () {
   let config = useRuntimeConfig();
-  const { data, status, error } = await useFetch<MovieList[]>(
+  const { data, error } = await useFetch<MovieList[]>(
     `${config.public.apiURL}/lists`,
     {
       method: "GET",
-      headers: { "Content-type": "application/json" },
+      headers: {
+        "Content-type": "application/json",
+        Authorization: `Token ${useCookie("token").value}`,
+      },
     },
   );
 
   if (error) {
     if (error.value?.statusCode === 401) {
-      console.log("unauthorized");
+      navigateTo("/");
     }
   } else {
     lists.value = data.value || [];