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

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",

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",

src/stores/authStore.js

@@ -3,6 +3,16 @@ 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',
@@ -14,6 +24,10 @@ export const useAuthStore = defineStore(
         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)
   }
 }