Cookies v SSR

quasar.config.js

@@ -29,6 +29,7 @@ module.exports = configure(function (ctx) {
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli/boot-files
     boot: [
+      "cookies",
       "axios",
       "apollo",
       "chartJs"
@@ -109,6 +110,7 @@ module.exports = configure(function (ctx) {
 
       // Quasar plugins
       plugins: [
+        'Cookies',
         'Dialog',
         'Meta',
         'Notify'

src/boot/apollo.js

@@ -10,6 +10,7 @@ import {createUploadLink} from "apollo-upload-client";
 const handleRefreshToken = (store, router, forward, operation) => {
   if (!operation.query?._refreshUnauthorizedUser) return;
 
+  console.log("refreshing token, ", operation.query);
   return fromPromise(useUserStore(store).refreshAccessToken()
     .catch((error) => {
       Notify.create(warningObject("Tvoje přihlášení vypřešlo. Přihlaš se prosím znovu."));
@@ -34,6 +35,7 @@ export const apolloWrapper = {};
 export default (({store, router}) => {
   const uploadLink = createUploadLink({
     uri: process.env.API_URL + '/graphql',
+    credentials: 'include'
   })
 
   const authLink = new ApolloLink((operation, forward) => {

src/boot/cookies.js

@@ -0,0 +1,9 @@
+import {Cookies} from 'quasar'
+import {boot} from "quasar/wrappers";
+
+let cookies = Cookies;
+export default boot(({ssrContext}) => {
+    cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies
+});
+
+export {cookies}

src/layouts/ProfileLayout.vue

@@ -34,18 +34,24 @@
     </q-drawer>
 
     <q-page-container>
-      <BreadcrumbsNavigation :items="breadcrumbs" v-if="breadcrumbs !== null"/>
+      <BreadcrumbsNavigation :items="breadcrumbs || []"/>
-      <BreadcrumbsSkeleton v-if="breadcrumbs === null" />
       <div class="q-mx-md q-my-md">
         <router-view/>
       </div>
     </q-page-container>
   </q-layout>
 </template>
-
+<script>
-<script setup>
-import {onMounted, ref} from 'vue'
 import {useUserStore} from "stores/User";
+
+export default {
+  preFetch() {
+    return useUserStore().fetchLoggedUserDetail({refresh: true});
+  }
+}
+</script>
+<script setup>
+import {ref} from 'vue'
 import {storeToRefs} from "pinia";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import {useAppStore} from "stores/App";
@@ -55,7 +61,6 @@ import {successObject} from "src/composables/dialog";
 import SidebarNavigation from "components/navigation/SidebarNavigation.vue";
 import TopMenuButton from "components/navigation/TopMenuButton.vue";
 import {metaData} from "src/composables/meta";
-import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
@@ -70,9 +75,6 @@ const toggleLeftDrawer = () => {
   leftDrawerOpen.value = !leftDrawerOpen.value
 };
 
-onMounted(() => {
-  useUserStore().fetchLoggedUserDetail({refresh: true});
-})
 const {isQueryRunning, user} = storeToRefs(useUserStore());
 
 const logout = () => {

src/layouts/PublicLayout.vue

@@ -32,10 +32,17 @@
   </q-layout>
 </template>
 
+<script>
+import {useUserStore} from "stores/User";
+
+export default {
+  preFetch() {
+    return useUserStore().fetchLoggedUserDetail({refresh: true});
+  }
+}
+</script>
 <script setup>
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
-import {onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import BreadcrumbsNavigation from "components/navigation/BreadcrumbsNavigation.vue";
 import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
@@ -43,14 +50,4 @@ import BreadcrumbsSkeleton from "components/navigation/BreadcrumbsSkeleton.vue";
 
 const {pageTitle, breadcrumbs} = storeToRefs(useAppStore());
 const loggedUser = storeToRefs(useUserStore()).user;
-
-onMounted(() => {
-  useUserStore().fetchLoggedUserDetail({refresh: false});
-
-  if (loggedUser || useUserStore().hasAccessToken()) {
-    // poll once per 5 minutes to keep access token active
-    setInterval(() => useUserStore().fetchLoggedUserDetail({refresh: false}), 5 * 60 * 1000);
-  }
-})
-
 </script>

src/pages/public/AircraftDetailPage.vue

@@ -1,22 +1,11 @@
-<script>
-import {useAircraftsStore} from "stores/Aircrafts";
-
-export default {
-  preFetch({currentRoute}) {
-    return useAircraftsStore().fetchPublicDetail(currentRoute.params.id);
-  }
-}
-</script>
-
 <script setup>
-import {useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import {useMeta, useQuasar} from "quasar";
 import AircraftDetailSkeleton from "components/aircrafts/skeletons/AircraftDetailSkeleton.vue";
-import {confirmObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
-import {computed, onMounted, watch} from "vue";
+import {onMounted, onServerPrefetch} from "vue";
 import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
@@ -26,18 +15,22 @@ import {usePhotosStore} from "stores/Photos";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {useAircraftsStore} from "stores/Aircrafts";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
 
 const $q = useQuasar();
 const $router = useRouter();
+const $route = useRoute();
+
+onServerPrefetch(() => {
+  return useAircraftsStore().fetchPublicDetail($route.params.id);
+});
 
 const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
-usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
-useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
-
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
   title: aircraft.value.callSign,
@@ -49,12 +42,17 @@ useMeta(() => metaData({
     aircraft.value.organization?.name,
     aircraft.value.manufacturer
   ],
-  description: aircraft.value.description
+  description: aircraft.value.description || `Detail letadla ${aircraft.value.callSign}.`
 }));
 useAppStore().setBreadcrumbs([
   {label: "Polétání.cz", to: {name: "homepage"}},
   {label: aircraft.value.callSign}
 ]);
+
+onMounted(() => {
+  usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
+  useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
+});
 </script>
 
 <template>
@@ -66,7 +64,8 @@ useAppStore().setBreadcrumbs([
         <q-card-section>
           <AircraftInfo :aircraft="aircraft"/>
 
-          <PhotoGallery :photos="photos"/>
+          <PhotoGallerySkeleton v-if="arePhotosLoading && !photos.length"/>
+          <PhotoGallery :photos="photos" v-else/>
 
           <h3>Lety</h3>
 

src/pages/public/PointOfInterestDetailPage.vue

@@ -1,13 +1,3 @@
-<script>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-
-export default {
-  preFetch({currentRoute, store}) {
-    return usePointsOfInterestStore(store).fetchPublicDetail(currentRoute.params.id);
-  }
-}
-</script>
-
 <script setup>
 import {storeToRefs} from "pinia";
 import {usePhotosStore} from "stores/Photos";
@@ -21,6 +11,15 @@ import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {onServerPrefetch} from "vue";
+import {useRoute} from "vue-router";
+
+const $route = useRoute();
+
+onServerPrefetch(() => {
+  return usePointsOfInterestStore().fetchPublicDetail($route.params.id);
+});
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -2,18 +2,17 @@
 import {useCopilotsStore} from "stores/Copilots";
 
 export default {
-  preFetch({store, currentRoute}) {
+  preFetch({currentRoute}) {
-    return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
+    return useCopilotsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
-
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
-import {onMounted} from "vue";
+import {onMounted, onServerPrefetch} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -21,13 +20,21 @@ import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
+// import {useCopilotsStore} from "stores/Copilots";
+// import {useRoute} from "vue-router";
 
 const props = defineProps({
   pilot: {
     type: Object,
     required: false
   },
-});
+})
+
+// const currentRoute = useRoute();
+//
+// onServerPrefetch(() => {
+//
+// })
 
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
 const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
@@ -47,8 +54,10 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
+onMounted(() => {
   useFlightsStore().fetchPublic({copilotId: copilot.value.id});
   usePhotosStore().fetchPublic({copilotId: copilot.value.id})
+})
 </script>
 
 <template>

src/stores/Copilots.js

@@ -18,12 +18,15 @@ export const useCopilotsStore = defineStore('Copilots', () => {
     }).then(item => copilot.value = item);
   };
 
-  const fetchPublicDetail = (id, username) => {
+  const fetchPublicDetail = (copilotId, username) => {
     return query({
       isQueryRunning,
       query: COPILOT_PUBLIC_DETAIL,
-      variables: {id, pilotUsername: username},
+      variables: {id: copilotId, pilotUsername: username},
-    }).then(item => copilot.value = item);
+    }).then(item => {
+      copilot.value = item;
+      return item;
+    });
   };
 
   const fetch = () => {

src/stores/User.js

@@ -4,6 +4,7 @@ import {EDIT_USER} from "src/graphql/mutations/user";
 import {LOGGED_USER_DETAIL, USER_DETAIL} from "src/graphql/queries/user";
 import {ref} from "vue";
 import {mutate, query} from "stores/helpers";
+import {cookies} from "boot/cookies";
 
 export const useUserStore = defineStore('LoggedUser', () => {
     const user = ref(null);
@@ -55,40 +56,35 @@ export const useUserStore = defineStore('LoggedUser', () => {
 
     const logout = () => {
         return api.post("/logout").then(response => {
-      localStorage.removeItem("accessToken");
+            unsetTokens();
-      localStorage.removeItem("accessTokenValidity");
             user.value = null;
         });
     };
 
+    const unsetTokens = () => {
+        cookies.remove("accessToken")
+    };
+
     const setTokens = ({access_token, access_token_validity}) => {
         const now = new Date().getTime() / 1000;
-    localStorage.setItem("accessToken", access_token);
+        // TODO: asi nefunguje expirace
-    localStorage.setItem("accessTokenValidity", now + access_token_validity);
+        cookies.set("accessToken", access_token, {expires: now + access_token_validity})
     };
 
     const getAccessToken = () => {
-    // TODO: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
+        return cookies.get("accessToken");
-    if (typeof localStorage === 'undefined') return null;
-
-    const tokenValidity = localStorage.getItem("accessTokenValidity");
-    const now = new Date().getTime() / 1000;
-
-    if (tokenValidity < now) {
-      localStorage.removeItem("accessToken");
-      localStorage.removeItem("accessTokenValidity");
-    }
-
-    return localStorage.getItem(`accessToken`);
     };
 
-  const hasAccessToken = () => !!localStorage.getItem("accessToken");
+    const hasAccessToken = () => !!getAccessToken();
 
     const refreshAccessToken = async () => api.post("/refresh")
         .then(({data}) => {
             setTokens(data);
+            console.log("token refreshed");
             return data.access_token;
-    });
+        }).catch((e) => {
+            console.log("cannot refresh token", e);
+        })
 
     return {
         isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,