Hide content actions when not creator. Adds token introspection in authStore.

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}
     })
 

src/views/contents/ContentCard.vue

@@ -25,10 +25,10 @@
               </v-btn>
             </template>
             <v-list>
-              <v-list-item @click="editContent">
+              <v-list-item v-if="creatorIsCurrentUser" @click="editContent">
                 <v-list-item-title>Modifier le contenu</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="openDeleteConfirmationDialog">
+              <v-list-item v-if="creatorIsCurrentUser" @click="openDeleteConfirmationDialog">
                 <v-list-item-title>Effacer le contenu</v-list-item-title>
               </v-list-item>
               <v-list-item @click="reportContent">
@@ -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)
   }
 }