diff --git a/package-lock.json b/package-lock.json index c218cd5..c7a5db2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@vueuse/core": "^10.11.0", "@xtiannyeto/vue-auth-social": "^0.1.9", "axios": "^1.6.7", + "jwt-decode": "^4.0.0", "pinia": "^2.1.7", "uuid": "^10.0.0", "vue": "^3.4.15", @@ -2630,6 +2631,15 @@ "safe-buffer": "^5.0.1" } }, + "node_modules/jwt-decode": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz", + "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/package.json b/package.json index 319d6d4..1194186 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@vueuse/core": "^10.11.0", "@xtiannyeto/vue-auth-social": "^0.1.9", "axios": "^1.6.7", + "jwt-decode": "^4.0.0", "pinia": "^2.1.7", "uuid": "^10.0.0", "vue": "^3.4.15", diff --git a/src/stores/authStore.js b/src/stores/authStore.js index f129a0b..681561d 100644 --- a/src/stores/authStore.js +++ b/src/stores/authStore.js @@ -3,17 +3,31 @@ import {computed, ref} from "vue"; import {useRouter} from "vue-router"; import {useClient} from "@/plugins/api.js"; import {useSessionStorage} from "@vueuse/core"; +import {jwtDecode} from "jwt-decode"; + +function getClaimsFromToken(token) { + try { + return jwtDecode(token); + } catch (error) { + console.error('Invalid token:', error); + return null; + } +} export const useAuthStore = defineStore( 'auth', () => { const clientApi = useClient() const router = useRouter() - + const accessToken = useSessionStorage('auth-accessToken', undefined) const refreshToken = useSessionStorage('auth-refreshToken', undefined) - + const isAuthenticated = computed(() => !!accessToken.value) + const userId = computed(() => { + const claims = getClaimsFromToken(accessToken.value) + return claims.sub; + }) function updateTokens(data) { accessToken.value = data.accessToken @@ -81,6 +95,6 @@ export const useAuthStore = defineStore( } } - return {accessToken, refreshToken, isAuthenticated, login, loginGoogle, logout} + return {accessToken, refreshToken, isAuthenticated, userId, login, loginGoogle, logout} }) diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue index a0c3dbe..02cf904 100644 --- a/src/views/contents/ContentCard.vue +++ b/src/views/contents/ContentCard.vue @@ -25,10 +25,10 @@ - + Modifier le contenu - + Effacer le contenu @@ -151,6 +151,7 @@ import DonationButton from "@/views/creators/DonationButton.vue"; import YoutubePlayer from './YoutubePlayer.vue'; import ImageViewer from './ImageViewer.vue'; import {useClient} from "@/plugins/api.js"; +import {useAuthStore} from "@/stores/authStore.js"; const props = defineProps({ content: { @@ -169,6 +170,9 @@ const creatorLogo = computed(() => props.content.createdByPortraitUrl) const colorMenu = computed(() => props.content.colorMenu) const colorAccent = computed(() => props.content.colorAccent) +const authStore = useAuthStore() +const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId === creatorId.value) + const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0); const messagesVisible = ref(false); const messages = ref([]); @@ -210,7 +214,7 @@ function editContent() { async function deleteContent() { const client = useClient() const response = await client.delete(`/api/contents/${contentId.value}`) - if (response.status >= 200 && response.status < 300){ + if (response.status >= 200 && response.status < 300) { emits('content:deleted', contentId.value) } }