Refactor and remove current_user cookie (#831)

* Get all current user from userStore * No need the cookie current user * Import missing watch
OpenCSGs · Dec 3, 2024 · d9fac34 · d9fac34
1 parent c7166f2
commit d9fac34
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 83 deletions.
diff --git a/frontend/src/components/application_spaces/InitializeGuide.vue b/frontend/src/components/application_spaces/InitializeGuide.vue
@@ -1,56 +1,61 @@
 <template>
-  <GradioInitializeGuide v-show="sdk == 'gradio'"
-                         :http-clone-url="httpCloneUrl"
-                         :ssh-clone-url="sshCloneUrl"
-                         :user-name="userName"
-                         :user-token="accessToken"
-                         :sdk="sdk" />
-
-  <StreamlitInitializeGuide v-show="sdk == 'streamlit'"
-                            :http-clone-url="httpCloneUrl"
-                            :ssh-clone-url="sshCloneUrl"
-                            :user-name="userName"
-                            :user-token="accessToken"
-                            :sdk="sdk" />
+  <GradioInitializeGuide
+    v-show="sdk == 'gradio'"
+    :http-clone-url="httpCloneUrl"
+    :ssh-clone-url="sshCloneUrl"
+    :user-name="userStore.username"
+    :user-token="accessToken"
+    :sdk="sdk" />
+
+  <StreamlitInitializeGuide
+    v-show="sdk == 'streamlit'"
+    :http-clone-url="httpCloneUrl"
+    :ssh-clone-url="sshCloneUrl"
+    :user-name="userStore.username"
+    :user-token="accessToken"
+    :sdk="sdk" />
 </template>
 
 <script setup>
   import GradioInitializeGuide from './GradioInitializeGuide.vue'
   import StreamlitInitializeGuide from './StreamlitInitializeGuide.vue'
   import useFetchApi from '../../packs/useFetchApi'
-  import { useCookies } from 'vue3-cookies'
-  import { ref, onMounted } from 'vue'
+  import useUserStore from '../../stores/UserStore'
+  import { ref, onMounted, watch } from 'vue'
+  import { ElMessage } from 'element-plus'
+
+  const userStore = useUserStore()
 
   const props = defineProps({
     httpCloneUrl: String,
     sshCloneUrl: String,
-    sdk: String,
-    userName: String
+    sdk: String
   })
 
-  const { cookies } = useCookies()
-
-  const currentUser = ref(cookies.get('current_user'))
   const accessToken = ref('')
 
+  watch(
+    () => userStore.username,
+    () => {
+      fetchUserToken()
+    }
+  )
+
   const fetchUserToken = async () => {
     const { data, error } = await useFetchApi(
-      `/user/${currentUser.value}/tokens?app=git`
+      `/user/${userStore.username}/tokens?app=git`
     ).json()
 
     if (error.value) {
-      ElMessage({
-        message: error.value.msg,
-        type: 'warning'
-      })
+      ElMessage.warning('error.value.msg')
     } else {
       const tokens = data.value.data
       accessToken.value = tokens[0]?.token || ''
     }
   }
 
   onMounted(() => {
-    if (currentUser.value) {
+    if (userStore.initialized) {
       fetchUserToken()
     }
   })

diff --git a/frontend/src/components/collections/CollectionsSettings.vue b/frontend/src/components/collections/CollectionsSettings.vue
@@ -150,7 +150,7 @@
         <div class="text-sm text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.delCollection') }}
         </div>
-        
+
         <div class="text-sm text-gray-600 leading-[20px]">
           {{ $t('collections.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('collections.edit.canNot') }}</span>
@@ -201,9 +201,9 @@
   import { ElMessage, ElMessageBox } from 'element-plus'
   import useFetchApi from '../../packs/useFetchApi'
   import { useI18n } from 'vue-i18n'
-  import { useCookies } from 'vue3-cookies'
+  import useUserStore from '../../stores/UserStore'
 
-  const { cookies } = useCookies()
+  const userStore = useUserStore()
 
   const props = defineProps({
     collection: Object,
@@ -212,8 +212,6 @@
   })
   const { t } = useI18n()
 
-  const currentUser = cookies.get('current_user')
-
   const delDesc = ref('')
   const collectionName = ref(props.collection.name)
   const collectionNickname = ref(props.collection.nickname)
@@ -313,7 +311,9 @@
     } else {
       ElMessage({ message: t('all.delSuccess'), type: 'success' })
       setTimeout(() => {
-        window.location.href = `/profile/${currentUser}`
+        // userStore will be initialized when loading navbar
+        // delete will trigger manually, so we don't need to check if userStore initialized or not
+        window.location.href = `/profile/${userStore.username}`
       }, 500)
     }
   }

diff --git a/frontend/src/components/endpoints/EndpointDetail.vue b/frontend/src/components/endpoints/EndpointDetail.vue
@@ -48,7 +48,9 @@
   import refreshJWT from '../../packs/refreshJWT.js'
   import useRepoDetailStore from '../../stores/RepoDetailStore'
   import useFetchApi from '../../packs/useFetchApi'
+  import useUserStore from '../../stores/UserStore.js'
 
+  const userStore = useUserStore()
   const { cookies } = useCookies()
 
   const props = defineProps({
@@ -61,9 +63,10 @@
     endpointId: Number
   })
 
-  const currentUser = cookies.get('current_user')
+  const canWrite = computed(() => {
+    return userStore.username === props.namespace
+  })
 
-  const canWrite = ref(currentUser === props.namespace)
   // only owner can view endpoint detail, so just set true
   const canManage = ref(true)
 

diff --git a/frontend/src/components/endpoints/EndpointSettings.vue b/frontend/src/components/endpoints/EndpointSettings.vue
@@ -277,11 +277,9 @@
   import useFetchApi from '../../packs/useFetchApi'
   import { useI18n } from 'vue-i18n'
   import useRepoDetailStore from '../../stores/RepoDetailStore'
-  import { useCookies } from 'vue3-cookies'
-
-  const { cookies } = useCookies()
-  const currentUser = cookies.get('current_user')
+  import useUserStore from '../../stores/UserStore.js'
 
+  const userStore = useUserStore()
   const repoDetailStore = useRepoDetailStore()
 
   const props = defineProps({
@@ -509,7 +507,7 @@
     } else {
       ElMessage({ message: t('all.delSuccess'), type: 'success' })
       setTimeout(() => {
-        window.location.href = `/profile/${currentUser}`
+        window.location.href = `/profile/${userStore.username}`
       }, 500)
       return true
     }

diff --git a/frontend/src/components/endpoints/playground/ApiExample.vue b/frontend/src/components/endpoints/playground/ApiExample.vue
@@ -76,8 +76,8 @@
   import { ref, computed, onMounted, watch } from 'vue'
   import CodeViewer from '../../shared/viewers/CodeViewer.vue'
   import { copyToClipboard } from '../../../packs/clipboard'
-  import { useCookies } from 'vue3-cookies'
   import useFetchApi from '../../../packs/useFetchApi'
+  import useUserStore from '../../../stores/UserStore'
 
   const props = defineProps({
     modelId: String,
@@ -86,9 +86,7 @@
     private: Boolean
   })
 
-  const { cookies } = useCookies()
-  const currentUser = ref(cookies.get('current_user'))
-
+  const userStore = useUserStore()
   const codeExtension = ref('py') // py, js, bash
   const codeContent = ref('')
   const useToken = ref(props.private)
@@ -271,11 +269,18 @@ ${useToken.value ? curlHeadersWithToken.value : curlHeaders}
     }
   )
 
+  watch(
+    () => userStore.username,
+    () => {
+      fetchUserToken()
+    }
+  )
+
   const fetchUserToken = async () => {
-    if (!currentUser.value) return
+    if (!userStore.username) return
 
     const { data } = await useFetchApi(
-      `/user/${currentUser.value}/tokens?app=git`
+      `/user/${userStore.username}/tokens?app=git`
     ).json()
 
     if (data.value) {
@@ -289,7 +294,9 @@ ${useToken.value ? curlHeadersWithToken.value : curlHeaders}
 
   onMounted(() => {
     setCodeContent()
-    fetchUserToken()
+    if (userStore.initialized) {
+      fetchUserToken()
+    }
   })
 </script>
 

diff --git a/frontend/src/components/finetune/FinetuneSettings.vue b/frontend/src/components/finetune/FinetuneSettings.vue
@@ -216,10 +216,7 @@
   import { ElMessage } from 'element-plus'
   import useFetchApi from '../../packs/useFetchApi'
   import { useI18n } from 'vue-i18n'
-  import { useCookies } from 'vue3-cookies'
-
-  const { cookies } = useCookies()
-  const currentUser = cookies.get('current_user')
+  import useUserStore from '../../stores/UserStore'
 
   const props = defineProps({
     finetune: Object,
@@ -233,6 +230,7 @@
     clusterId: String
   })
 
+  const userStore = useUserStore()
   const statusVal = ref(props.appStatus == 'Running')
   const { t } = useI18n()
   const delDesc = ref('')
@@ -366,7 +364,7 @@
     } else {
       ElMessage({ message: t('all.delSuccess'), type: 'success' })
       setTimeout(() => {
-        window.location.href = `/profile/${currentUser}`
+        window.location.href = `/profile/${userStore.username}`
       }, 500)
     }
   }

diff --git a/frontend/src/components/organizations/OrganizationSettings.vue b/frontend/src/components/organizations/OrganizationSettings.vue
@@ -32,17 +32,16 @@
   import OrganizationEdit from './OrganizationEdit.vue'
   import OrganizationMembers from './OrganizationMembers.vue'
   import useFetchApi from "../../packs/useFetchApi"
-  import { ref, onMounted } from 'vue'
-  import { useCookies } from 'vue3-cookies'
+  import { ref, onMounted, watch } from 'vue'
   import { ElMessage } from 'element-plus'
+  import useUserStore from '../../stores/UserStore'
 
   const props = defineProps({
     name: String,
     action: String
   })
-  
-  const { cookies } = useCookies()
-  const current_user = cookies.get('current_user')
+
+  const userStore = useUserStore()
 
   const organization = ref({
     name: props.name,
@@ -55,6 +54,13 @@
 
   const role =ref('')
 
+  watch(
+    () => userStore.username,
+    () => {
+      currentUserRole()
+    }
+  )
+
   const fetchOrgDetail = async () => {
     const orgDetailEndpoint = `/organization/${props.name}`
     const { data, error } = await useFetchApi(orgDetailEndpoint).json()
@@ -84,9 +90,9 @@
       organization.value.logo = logo
     }
   }
-  
+
   const currentUserRole = async () => {
-    const orgIsAdminEndpoint = `/organization/${props.name}/members/${current_user}`
+    const orgIsAdminEndpoint = `/organization/${props.name}/members/${userStore.username}`
     const { data, error } = await useFetchApi(orgIsAdminEndpoint).json()
 
     if (error.value) {
@@ -99,6 +105,8 @@
 
   onMounted(() => {
     fetchOrgDetail()
-    currentUserRole()
+    if (userStore.initialized) {
+      currentUserRole()
+    }
   })
 </script>
diff --git a/frontend/src/components/shared/ProfileRepoList.vue b/frontend/src/components/shared/ProfileRepoList.vue
@@ -7,8 +7,8 @@
         <span>{{ $t("collections.collection") }}</span>
       </h3>
       <div v-if="hasCollections" class="mb-4 mt-[16px]">
-        <CollectionCards 
-          v-if="collections.data.length > 0" 
+        <CollectionCards
+          v-if="collections.data.length > 0"
           :collections="collections.data"
         />
       </div>
@@ -95,22 +95,14 @@
   import CollectionCards from "../collections/CollectionCards.vue"
   import ApplicationSpaceItem from "../application_spaces/ApplicationSpaceItem.vue"
   import ViewMore from "./ViewMore.vue"
-  import { useI18n } from "vue-i18n"
   import useFetchApi from "../../packs/useFetchApi"
   import { ElMessage } from "element-plus"
-  import { useCookies } from 'vue3-cookies'
-  const { cookies } = useCookies()
+
   const props = defineProps({
     name: String,
     initiator: String
   })
 
-  const { t } = useI18n()
-  const current_user = cookies.get('current_user')
-  const isCurrentUser = computed(() => {
-    return props.name === current_user
-  })
-
   const collections = ref([])
   const models = ref([])
   const datasets = ref([])
@@ -205,7 +197,7 @@
     const params = new URLSearchParams()
     params.append("per", total)
     params.append("page", 1)
-    
+
     try {
       const { data, error } = await useFetchApi(`${url}?${params}`).json()