fix 用户权限控制

src/App.vue

@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import { useToast } from 'vue-toast-notification'
 import { useTheme } from 'vuetify'
-import api from './api'
-import type { User } from './api/types'
 import store from './store'
-import avatar1 from '@images/avatars/avatar-1.png'
 
 // 第一时间应用主题
 const { global: globalTheme } = useTheme()
@@ -36,40 +33,10 @@ function startSSEMessager() {
   }
 }
 
-// 当前用户信息
-const accountInfo = ref<User>({
-  id: 0,
-  name: '',
-  password: '',
-  email: '',
-  is_active: false,
-  is_superuser: false,
-  avatar: avatar1,
-})
-
-// 调用API，加载当前用户数据
-async function loadAccountInfo() {
-  try {
-    const user: User = await api.get('user/current')
-
-    accountInfo.value = user
-    if (!accountInfo.value.avatar)
-      accountInfo.value.avatar = avatar1
-  }
-  catch (error) {
-    console.log(error)
-  }
-}
-
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
-  await loadAccountInfo()
-  console.log('accountInfo', accountInfo.value)
   startSSEMessager()
 })
-
-// 提供给所有元素复用
-provide('accountInfo', accountInfo)
 </script>
 
 <template>

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { User } from '@/api/types'
 import VerticalNavSectionTitle from '@/@layouts/components/VerticalNavSectionTitle.vue'
 import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue'
 import VerticalNavLink from '@layouts/components/VerticalNavLink.vue'
@@ -10,9 +9,10 @@ import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
 import SearchBar from '@/layouts/components/SearchBar.vue'
 import ShortcutBar from '@/layouts/components/ShortcutBar.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
+import store from '@/store'
 
-// 获取当前用户信息
+// 从Vuex Store中获取superuser信息
-const accountInfo: User = inject('accountInfo') as User
+const superUser = store.state.auth.superUser
 </script>
 
 <template>
@@ -91,7 +91,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '电影',
           icon: 'mdi-movie-check-outline',
@@ -99,7 +99,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '电视剧',
           icon: 'mdi-television-classic',
@@ -107,7 +107,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '自定义',
           icon: 'mdi-rss',
@@ -135,7 +135,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '历史记录',
           icon: 'mdi-history',
@@ -143,7 +143,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '文件管理',
           icon: 'mdi-folder-multiple-outline',
@@ -153,13 +153,13 @@ const accountInfo: User = inject('accountInfo') as User
 
       <!-- 👉 系统 -->
       <VerticalNavSectionTitle
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           heading: '系统',
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '插件',
           icon: 'mdi-apps',
@@ -167,7 +167,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '站点管理',
           icon: 'mdi-web',
@@ -175,7 +175,7 @@ const accountInfo: User = inject('accountInfo') as User
         }"
       />
       <VerticalNavLink
-        v-if="accountInfo.is_superuser"
+        v-if="superUser"
         :item="{
           title: '设定',
           icon: 'mdi-cog',

src/layouts/components/UserProfile.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useStore } from 'vuex'
 import router from '@/router'
-import type { User } from '@/api/types'
+import avatar1 from '@images/avatars/avatar-1.png'
 
 // Vuex Store
 const store = useStore()
@@ -15,8 +15,10 @@ function logout() {
   router.push('/login')
 }
 
-// 获取当前用户信息
+// 从Vuex Store中获取信息
-const accountInfo: User = inject('accountInfo') as User
+const superUser = store.state.auth.superUser
+const userName = store.state.auth.userName
+const avatar = store.state.auth.avatar
 </script>
 
 <template>
@@ -25,7 +27,7 @@ const accountInfo: User = inject('accountInfo') as User
     color="primary"
     variant="tonal"
   >
-    <VImg :src="accountInfo.avatar" />
+    <VImg :src="avatar ?? avatar1" />
 
     <!-- SECTION Menu -->
     <VMenu
@@ -43,21 +45,21 @@ const accountInfo: User = inject('accountInfo') as User
                 color="primary"
                 variant="tonal"
               >
-                <VImg :src="accountInfo.avatar" />
+                <VImg :src="avatar ?? avatar1" />
               </VAvatar>
             </VListItemAction>
           </template>
 
           <VListItemTitle class="font-weight-semibold">
-            {{ accountInfo.is_superuser ? "管理员" : "普通用户" }}
+            {{ superUser ? "管理员" : "普通用户" }}
           </VListItemTitle>
-          <VListItemSubtitle>{{ accountInfo.name }}</VListItemSubtitle>
+          <VListItemSubtitle>{{ userName }}</VListItemSubtitle>
         </VListItem>
         <VDivider class="my-2" />
 
         <!-- 👉 Profile -->
         <VListItem
-          v-if="accountInfo.is_superuser"
+          v-if="superUser"
           link
           to="setting"
         >

src/pages/login.vue

@@ -66,10 +66,16 @@ function login() {
     .then((response: any) => {
       // 获取token
       const token = response.access_token
+      const superuser = response.super_user
+      const username = response.user_name
+      const avatar = response.avatar
 
       // 更新token和remember状态到Vuex Store
       store.dispatch('auth/updateToken', token)
       store.dispatch('auth/updateRemember', form.value.remember)
+      store.dispatch('auth/updateSuperUser', superuser)
+      store.dispatch('auth/updateUserName', username)
+      store.dispatch('auth/updateAvatar', avatar)
 
       // 跳转到首页
       router.push('/')

src/store/auth.ts

@@ -4,6 +4,9 @@ import type { Module } from 'vuex'
 interface AuthState {
   token: string | null
   remember: boolean
+  superUser: boolean
+  userName: string
+  avatar: string
 }
 
 // 定义根状态类型
@@ -17,6 +20,9 @@ const authModule: Module<AuthState, RootState> = {
   state: {
     token: null,
     remember: false,
+    superUser: false,
+    userName: '',
+    avatar: '',
   },
   mutations: {
     setToken(state, token: string) {
@@ -28,6 +34,15 @@ const authModule: Module<AuthState, RootState> = {
     setRemember(state, remember: boolean) {
       state.remember = remember
     },
+    setSuperUser(state, superUser: boolean) {
+      state.superUser = superUser
+    },
+    setUserName(state, userName: string) {
+      state.userName = userName
+    },
+    setAvatar(state, avatar: string) {
+      state.avatar = avatar
+    },
   },
   actions: {
     updateToken({ commit }, token: string) {
@@ -39,10 +54,22 @@ const authModule: Module<AuthState, RootState> = {
     updateRemember({ commit }, remember: boolean) {
       commit('setRemember', remember)
     },
+    updateSuperUser({ commit }, superUser: boolean) {
+      commit('setSuperUser', superUser)
+    },
+    updateUserName({ commit }, userName: string) {
+      commit('setUserName', userName)
+    },
+    updateAvatar({ commit }, avatar: string) {
+      commit('setAvatar', avatar)
+    },
   },
   getters: {
     getToken: state => state.token,
     getRemember: state => state.remember,
+    getSuperUser: state => state.superUser,
+    getUserName: state => state.userName,
+    getAvatar: state => state.avatar,
   },
 }