poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cookies v SSR

Browse Source
This commit is contained in:
Michal Kváček
2023-12-10 22:10:26 +01:00
parent 71389caecc
commit 9b38abd0de
10 changed files with 173 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quasar.config.js
+2
View File
@@ -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
+2
View File
@@ -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
+9
View File
@@ -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
+20 -18
View File
@@ -3,12 +3,12 @@
<q-header reveal elevated class="bg-primary text-white">
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title>
@@ -21,9 +21,9 @@
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
v-model="leftDrawerOpen"
show-if-above
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"/>
<BreadcrumbsSkeleton v-if="breadcrumbs === null" />
<BreadcrumbsNavigation :items="breadcrumbs || []"/>
<div class="q-mx-md q-my-md">
<router-view/>
</div>
</q-page-container>
</q-layout>
</template>
<script setup>
import {onMounted, ref} from 'vue'
<script>
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
+10 -13
View File
@@ -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
+17 -18
View File
@@ -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
+9 -10
View File
@@ -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
+20 -11
View File
@@ -2,18 +2,17 @@
import {useCopilotsStore} from "stores/Copilots";
export default {
preFetch({store, currentRoute}) {
return useCopilotsStore(store).fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
preFetch({currentRoute}) {
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});
usePhotosStore().fetchPublic({copilotId: copilot.value.id})
onMounted(() => {
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
:items="flights"
:public="true"
class="q-mb-md"
v-else
:items="flights"
:public="true"
class="q-mb-md"
/>
</q-card-section>
</template>
src/stores/Copilots.js
+6 -3
View File
@@ -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},
}).then(item => copilot.value = item);
variables: {id: copilotId, pilotUsername: username},
}).then(item => {
copilot.value = item;
return item;
});
};
const fetch = () => {
src/stores/User.js
+78 -82
View File
@@ -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 publicUser = ref(null);
const isQueryRunning = ref(false);
const isMutationRunning = ref(false);
const isRefreshing = ref(false);
const user = ref(null);
const publicUser = ref(null);
const isQueryRunning = ref(false);
const isMutationRunning = ref(false);
const isRefreshing = ref(false);
const fetchLoggedUserDetail = ({refresh}) => query({
isQueryRunning,
query: LOGGED_USER_DETAIL,
refreshUnauthorized: refresh || false,
}).then(item => {
user.value = 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 fetchLoggedUserDetail = ({refresh}) => query({
isQueryRunning,
query: LOGGED_USER_DETAIL,
refreshUnauthorized: refresh || false,
}).then(item => {
user.value = item;
return item;
});
};
const setTokens = ({access_token, access_token_validity}) => {
const now = new Date().getTime() / 1000;
localStorage.setItem("accessToken", access_token);
localStorage.setItem("accessTokenValidity", now + access_token_validity);
};
const fetchPublicUserDetail = (username) => query({
isQueryRunning,
query: USER_DETAIL,
variables: {username}
}).then(item => {
publicUser.value = item;
return item;
});
const getAccessToken = () => {
// TODO: https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
if (typeof localStorage === 'undefined') return null;
const update = (input) => mutate({
isMutationRunning,
mutation: EDIT_USER,
variables: {input}
}).then(item => {
user.value = item;
return item;
});
const tokenValidity = localStorage.getItem("accessTokenValidity");
const now = new Date().getTime() / 1000;
const register = async (formData) => {
return api.post('/registration', formData).then(response => {
const registeredUser = response.data;
const isSuccess = response.status === 201
})
};
if (tokenValidity < now) {
localStorage.removeItem("accessToken");
localStorage.removeItem("accessTokenValidity");
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 => {
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
}
});