BUG fix: login router recursive

src/directives/permission/permission.ts

@@ -1,12 +1,10 @@
 import type { Directive, DirectiveBinding } from 'vue'
 import Message from '@/components/alert/Message'
-import { currentUserInfo } from '@/utils/getCurrentUserInfo'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
 import router from '@/router'
 
-// Current user's UID
-const currentUserUid = currentUserInfo.uid
-// Current user's roles
-const currentUserRoles = currentUserInfo.roles
+const { roles, uid } = storeToRefs(useKUNGalgameUserStore())
 
 // User roles: Guest 0, User 1, Admin 2, SuperAdmin 3, User Self 4
 enum UserRole {
@@ -40,17 +38,17 @@ const handleUnauthorizedAccess = (element: HTMLElement) => {
 
 export const permission: Directive = {
   mounted(element: HTMLElement, binding: DirectiveBinding<BindingProps>) {
-    const roles = [...binding.value.roles]
-    const uid = binding.value.uid
+    const bindingRoles = [...binding.value.roles]
+    const bindingUid = binding.value.uid
 
     const hasPermission = () => {
       // User Self
-      if (uid === currentUserUid) {
+      if (bindingUid === uid.value) {
         return true
       }
 
       // User has access permission
-      if (roles.includes(currentUserRoles)) {
+      if (bindingRoles.includes(roles.value)) {
         return true
       }
 

src/router/guard/permission.ts

@@ -2,8 +2,7 @@
 import { Router } from 'vue-router'
 import { whiteList } from '../router'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
-
-import { getCurrentUserRole } from '@/utils/getCurrentUserRole'
+import { storeToRefs } from 'pinia'
 
 import NProgress from 'nprogress'
 import '@/styles/nprogress/nprogress.scss'
@@ -16,6 +15,7 @@ export const createPermission = (router: Router) => {
     NProgress.start()
 
     const token = useKUNGalgameUserStore().getToken()
+    const { uid, roles } = storeToRefs(useKUNGalgameUserStore())
 
     const isInWhitelist = whiteList.includes(to.name as string)
     // Get the required permissions for the target route
@@ -25,22 +25,26 @@ export const createPermission = (router: Router) => {
 
     if (!token && !isInWhitelist) {
       NProgress.done()
-      return '/login'
+      return { name: 'Login' }
     }
 
     // Authentication is required
-    if (requiredPermissions) {
-      const currentPageUid = parseInt(to.params.uid as string)
-      const currentUserRole = getCurrentUserRole(currentPageUid)
+    const currentPageUid = parseInt(to.params.uid as string)
 
-      if (!requiredPermissions.includes(currentUserRole)) {
-        // If it's a user interface, redirect to 'info';
-        // Otherwise, redirect to '403'
-        return to.matched[0].path === '/kungalgamer'
-          ? `/kungalgamer/${currentPageUid}/info`
-          : '/kungalgame403'
+    const currentUserRoles = () => {
+      if (currentPageUid === uid.value) {
+        return 4
+      } else {
+        return roles.value
       }
     }
+
+    if (!requiredPermissions.includes(currentUserRoles())) {
+      if (to.matched[0].path === '/kungalgamer') {
+        return { name: 'KUNGalgamerInfo' }
+      }
+      return { name: '403' }
+    }
   })
 
   // Finish NProgress

src/router/modules/kungalgamer.ts

@@ -1,6 +1,4 @@
 import { type RouteRecordRaw } from 'vue-router'
-// Current user's information
-import { currentUserInfo } from '@/utils/getCurrentUserInfo'
 
 const Layout = () => import('@/layout/KUNGalgameAPP.vue')
 
@@ -12,11 +10,11 @@ const kungalgamer: RouteRecordRaw[] = [
     path: '/kungalgamer',
     component: Layout,
     // Access defaults to the current user's main page
-    redirect: `/kungalgamer/${currentUserInfo.uid}/info`,
+    // redirect: `/kungalgamer/${uid.value}/info`,
     children: [
       {
         path: ':uid',
-        redirect: `/kungalgamer/${currentUserInfo.uid}/info`,
+        // redirect: `/kungalgamer/${uid.value}/info`,
         component: () => import('@/views/kungalgamer/KUNGalgamer.vue'),
         children: [
           {

src/utils/getCurrentUserInfo.ts

@@ -1,17 +0,0 @@
-// Pinia can only be used within the setup function
-// Sometimes, this is the only way to retrieve user information.
-
-interface CurrentUserInfo {
-  uid: number
-  name: string
-  avatar: string
-  moemoepoint: number
-  roles: number
-  token: string
-}
-
-const userInfoString = localStorage.getItem('KUNGalgameUser')
-
-export const currentUserInfo: CurrentUserInfo = userInfoString
-  ? JSON.parse(userInfoString)
-  : {}

src/utils/getCurrentUserRole.ts

@@ -1,17 +0,0 @@
-// Get the current user's role based on their UID.
-// User permissions: Guest 0, User 1, Admin 2, Super Admin 3, User themselves 4
-
-import { currentUserInfo } from './getCurrentUserInfo'
-
-const currentUserUid = currentUserInfo.uid
-const currentUserRoles = currentUserInfo.roles
-
-export const getCurrentUserRole = (uid?: number) => {
-  const userID = uid ? uid : currentUserUid
-
-  // The current user themselves
-  if (currentUserUid === userID) {
-    return 4
-  }
-  return currentUserRoles
-}

src/views/403/403.vue

@@ -4,7 +4,7 @@
   <div class="root">
     <div class="container">
       <p>403</p>
-      <p>{{ $tm('page404.permission') }}</p>
+      <p>{{ $tm('page403.permission') }}</p>
       <button>
         <RouterLink to="/kun">{{ $tm('page403.back') }}</RouterLink>
       </button>

src/views/kungalgamer/components/NavBar.vue

@@ -1,31 +1,46 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { navBarRoute } from './routeName'
 
-// Get the current user's role based on UID
-import { getCurrentUserRole } from '@/utils/getCurrentUserRole'
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+const { uid, roles } = storeToRefs(useKUNGalgameUserStore())
 
 const props = defineProps<{
   uid: number
 }>()
 
+const route = useRoute()
 // UID of the current page
 const currentPageUid = ref(0)
+
+const currentPageUserRoles = computed(() => {
+  if (props.uid === uid.value) {
+    return 4
+  } else {
+    return roles.value
+  }
+})
 // Show the nav item for other users' profiles based on their permissions
 const isShowNavItem = (permission: number[]) =>
-  permission.includes(getCurrentUserRole(currentPageUid.value))
+  permission.includes(currentPageUserRoles.value)
 
 // Apply active CSS class to the selected item
 const activeClass = (currentPageUid: number, routeName: string) => {
-  return useRoute().fullPath === `/kungalgamer/${currentPageUid}/${routeName}`
+  return route.fullPath === `/kungalgamer/${currentPageUid}/${routeName}`
     ? 'active'
     : ''
 }
 
-onMounted(() => {
-  currentPageUid.value = props.uid
-})
+watch(
+  () => props.uid,
+  () => {
+    currentPageUid.value = props.uid
+  },
+  { immediate: true }
+)
 </script>
 
 <template>