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

@@ -3,12 +3,12 @@
     <q-header reveal elevated class="bg-primary text-white">
       <q-toolbar>
         <q-btn
-          flat
+            flat
-          dense
+            dense
-          round
+            round
-          icon="menu"
+            icon="menu"
-          aria-label="Menu"
+            aria-label="Menu"
-          @click="toggleLeftDrawer"
+            @click="toggleLeftDrawer"
         />
 
         <q-toolbar-title>
@@ -21,9 +21,9 @@
     </q-header>
 
     <q-drawer
-      v-model="leftDrawerOpen"
+        v-model="leftDrawerOpen"
-      show-if-above
+        show-if-above
-      bordered
+        bordered
     >
       <q-img class="absolute-top" v-if="!isQueryRunning && user" :src="user.titleImageUrl" style="height: 150px"/>
       <q-spinner v-else/>
@@ -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

@@ -25,17 +25,24 @@
 
     <q-page-container>
       <BreadcrumbsNavigation :items="breadcrumbs" v-if="breadcrumbs !== null"/>
-      <BreadcrumbsSkeleton v-if="breadcrumbs === null" />
+      <BreadcrumbsSkeleton v-if="breadcrumbs === null"/>
 
       <router-view class="q-my-lg q-mx-lg"/>
     </q-page-container>
   </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
 }));
 
-useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+onMounted(() => {
-usePhotosStore().fetchPublic({copilotId: copilot.value.id})
+  useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+  usePhotosStore().fetchPublic({copilotId: copilot.value.id})
+})
 </script>
 
 <template>
@@ -63,10 +72,10 @@ usePhotosStore().fetchPublic({copilotId: copilot.value.id})
         <h3>Společné lety</h3>
         <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
         <FlightsList
-          v-else
+            v-else
-          :items="flights"
+            :items="flights"
-          :public="true"
+            :public="true"
-          class="q-mb-md"
+            class="q-mb-md"
         />
       </q-card-section>
     </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,95 +4,91 @@ 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);
+    const user = ref(null);
-  const publicUser = ref(null);
+    const publicUser = ref(null);
-  const isQueryRunning = ref(false);
+    const isQueryRunning = ref(false);
-  const isMutationRunning = ref(false);
+    const isMutationRunning = ref(false);
-  const isRefreshing = ref(false);
+    const isRefreshing = ref(false);
 
-  const fetchLoggedUserDetail = ({refresh}) => query({
+    const fetchLoggedUserDetail = ({refresh}) => query({
-    isQueryRunning,
+        isQueryRunning,
-    query: LOGGED_USER_DETAIL,
+        query: LOGGED_USER_DETAIL,
-    refreshUnauthorized: refresh || false,
+        refreshUnauthorized: refresh || false,
-  }).then(item => {
+    }).then(item => {
-    user.value = item;
+        user.value = item;
-    return item;
+        return item;
-  });
-
-  const fetchPublicUserDetail = (username) => query({
-    isQueryRunning,
-    query: USER_DETAIL,
-    variables: {username}
-  }).then(item => {
-    publicUser.value = item;
-    return item;
-  });
-
-  const update = (input) => mutate({
-    isMutationRunning,
-    mutation: EDIT_USER,
-    variables: {input}
-  }).then(item => {
-    user.value = item;
-    return item;
-  });
-
-  const register = async (formData) => {
-    return api.post('/registration', formData).then(response => {
-      const registeredUser = response.data;
-      const isSuccess = response.status === 201
-    })
-  };
-
-  const login = async (formData) => {
-    return api.post("/login", formData).then(({data}) => {
-      setTokens(data);
-      user.value = data.user;
-    })
-  };
-
-  const logout = () => {
-    return api.post("/logout").then(response => {
-      localStorage.removeItem("accessToken");
-      localStorage.removeItem("accessTokenValidity");
-      user.value = null;
     });
-  };
 
-  const setTokens = ({access_token, access_token_validity}) => {
+    const fetchPublicUserDetail = (username) => query({
-    const now = new Date().getTime() / 1000;
+        isQueryRunning,
-    localStorage.setItem("accessToken", access_token);
+        query: USER_DETAIL,
-    localStorage.setItem("accessTokenValidity", now + access_token_validity);
+        variables: {username}
-  };
+    }).then(item => {
+        publicUser.value = item;
+        return item;
+    });
 
-  const getAccessToken = () => {
+    const update = (input) => mutate({
-    // TODO: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
+        isMutationRunning,
-    if (typeof localStorage === 'undefined') return null;
+        mutation: EDIT_USER,
+        variables: {input}
+    }).then(item => {
+        user.value = item;
+        return item;
+    });
 
-    const tokenValidity = localStorage.getItem("accessTokenValidity");
+    const register = async (formData) => {
-    const now = new Date().getTime() / 1000;
+        return api.post('/registration', formData).then(response => {
+            const registeredUser = response.data;
+            const isSuccess = response.status === 201
+        })
+    };
 
-    if (tokenValidity < now) {
+    const login = async (formData) => {
-      localStorage.removeItem("accessToken");
+        return api.post("/login", formData).then(({data}) => {
-      localStorage.removeItem("accessTokenValidity");
+            setTokens(data);
+            user.value = data.user;
+        })
+    };
+
+    const logout = () => {
+        return api.post("/logout").then(response => {
+            unsetTokens();
+            user.value = null;
+        });
+    };
+
+    const unsetTokens = () => {
+        cookies.remove("accessToken")
+    };
+
+    const setTokens = ({access_token, access_token_validity}) => {
+        const now = new Date().getTime() / 1000;
+        // TODO: asi nefunguje expirace
+        cookies.set("accessToken", access_token, {expires: now + access_token_validity})
+    };
+
+    const getAccessToken = () => {
+        return cookies.get("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,
+        register, login, logout,
+        getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
     }
-
-    return localStorage.getItem(`accessToken`);
-  };
-
-  const hasAccessToken = () => !!localStorage.getItem("accessToken");
-
-  const refreshAccessToken = async () => api.post("/refresh")
-    .then(({data}) => {
-      setTokens(data);
-      return data.access_token;
-    });
-
-  return {
-    isQueryRunning, isMutationRunning, user, publicUser, fetchLoggedUserDetail, fetchPublicUserDetail, update,
-    register, login, logout,
-    getAccessToken, hasAccessToken, refreshAccessToken, isRefreshing
-  }
 });