401全局登录

components/i/Nav.vue

@@ -18,31 +18,25 @@
             to="/library"
             @click="handleClickItem"
         />
-        <ISearchHistory @sign="handleOpenSign" />
+        <ISearchHistory @sign="$openSign" />
         <ClientOnly>
             <UButton
                 v-if="!$isSignIn"
                 class="flex gap-2 justify-center"
                 size="lg"
                 label="登录"
-                @click="handleOpenSign"
+                @click="$openSign"
             />
         </ClientOnly>
     </div>
-    <UModal v-model="isOpenSign">
-        <ISign @close="handleCloseSign" />
+    <UModal v-model="$isOpenSign">
+        <ISign @close="$closeSign" />
     </UModal>
 </template>
 <script setup>
-const { $isSignIn } = storeToRefs(useUserStore())
+const { $isSignIn, $isOpenSign } = storeToRefs(useUserStore())
+const { $openSign, $closeSign } = useUserStore()
 const Layout = inject('Layout')
-const isOpenSign = ref(false)
-const handleOpenSign = () => {
-    isOpenSign.value = true
-}
-const handleCloseSign = () => {
-    isOpenSign.value = false
-}
 function handleClickItem () {
     Layout.handleCloseAside()
 }

composables/useRequest.js

@@ -21,6 +21,7 @@ const request = async (url, options = {}) => {
         onResponseError({ request, response, options }) {
             const status = response.status
             if (process.client && (status === 401 || status === 403)) {
+                // 全局弹提示
                 let title
                 if (status === 401) title = '抱歉，您没有权限操作'
                 else if (status === 403) title = '抱歉，您没有权限访问当前内容'
@@ -33,6 +34,12 @@ const request = async (url, options = {}) => {
                         color: 'red'
                     })
                 })
+                // 全局弹登录
+                const { $isSignIn } = storeToRefs(useUserStore())
+                const { $openSign } = useUserStore()
+                if (status === 401 && !$isSignIn.value) {
+                    $openSign()
+                }
             }
             // 处理响应错误
             console.log('[ResponseError]', request)

stores/user.js

@@ -6,6 +6,7 @@ export const useUserStore = defineStore('user', () => {
 
     const $info = computed(() => userInfo.value ? userInfo.value : {})
     const $isSignIn = computed(() => !!token.value)
+    const $isOpenSign = ref(false)
 
     function $signOut () {
         token.value = null
@@ -18,5 +19,12 @@ export const useUserStore = defineStore('user', () => {
         userInfo.value = data.value.data
     }
 
-    return { $info, $isSignIn, $signOut, $updateUserInfo }
+    function $openSign () {
+        $isOpenSign.value = true
+    }
+    function $closeSign () {
+        $isOpenSign.value = false
+    }
+
+    return { $info, $isSignIn, $isOpenSign, $signOut, $updateUserInfo, $openSign, $closeSign }
 })