后台增加退出登录选项

MarSeventh · Sep 28, 2024 · ed0a0b0 · ed0a0b0
1 parent 08d6541
commit ed0a0b0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 23 deletions.
diff --git a/src/router/index.js b/src/router/index.js
@@ -44,8 +44,24 @@ const routes = [
       // 从store中获取凭据
       const credentials = store.getters.credentials
       if (credentials === null && to.name !== 'adminLogin') {
-        ElMessage.error('请先登录！')
-        next({ name: 'adminLogin' })
+        // 尝试未设置密码的情况
+        const credentials = btoa('unset:unset')
+        fetch ('/api/manage/check', { 
+                method: 'GET',
+                headers: {
+                  'Authorization': 'Basic ' + credentials
+                },
+                credentials: 'include'
+        }).then(res => {
+            if (res.status !== 200) {
+                throw new Error('认证失败！')
+            }
+            store.commit('setCredentials', credentials)
+            next()
+        }).catch(err => {
+            ElMessage.error('请先认证！')
+            next({ name: 'adminLogin' })
+        })
       } else {
         next()
       }

diff --git a/src/views/AdminDashBoard.vue b/src/views/AdminDashBoard.vue
@@ -34,7 +34,10 @@
                     <font-awesome-icon icon="user-cog" class="header-icon" @click="handleGoToAdmin"></font-awesome-icon>
                 </el-tooltip>
                 <el-tooltip content="返回上传页" placement="bottom">
-                    <font-awesome-icon icon="home" class="header-icon" @click="handleLogout"></font-awesome-icon>
+                    <font-awesome-icon icon="home" class="header-icon" @click="handleGoUpload"></font-awesome-icon>
+                </el-tooltip>
+                <el-tooltip content="退出登录" placement="bottom">
+                    <font-awesome-icon icon="sign-out-alt" class="header-icon" @click="handleLogout"></font-awesome-icon>
                 </el-tooltip>
                 </div>
             </div>
@@ -137,6 +140,7 @@ methods: {
 
         if (response.status === 401) {
             // Redirect to the login page if a 401 Unauthorized is returned
+            this.$message.error('认证状态错误，请重新登录');
             this.$router.push('/adminLogin'); 
             throw new Error('Unauthorized');
         }
@@ -209,7 +213,7 @@ methods: {
         document.body.removeChild(textarea);
         this.$message.success('批量复制链接成功~');
     },
-    handleLogout() {
+    handleGoUpload() {
         this.$router.push('/');
     },
     handleGoToAdmin() {
@@ -247,35 +251,41 @@ methods: {
             // IE/Edge
             videoElement.msRequestFullscreen();
         }
+    },
+    handleLogout() {
+        this.$store.commit('setCredentials', null);
+        this.$router.push('/adminLogin');
     }
 },
 mounted() {
     this.fetchWithAuth("/api/manage/check", { method: 'GET' })
         .then(response => response.text())
         .then(result => {
-        if(result == "true"){
-            this.showLogoutButton=true;
-            // 在 check 成功后再执行 list 的 fetch 请求
-            return this.fetchWithAuth("/api/manage/list", { method: 'GET' });
-        } else if(result=="Not using basic auth."){
-            return this.fetchWithAuth("/api/manage/list", { method: 'GET' });
-        }
-        else{
-            // window.location.reload();
-            return Promise.reject();
-        }
+            if(result == "true"){
+                this.showLogoutButton=true;
+                // 在 check 成功后再执行 list 的 fetch 请求
+                return this.fetchWithAuth("/api/manage/list", { method: 'GET' });
+            } else if(result=="Not using basic auth."){
+                return this.fetchWithAuth("/api/manage/list", { method: 'GET' });
+            } else{
+                throw new Error('Unauthorized');
+            }
         })
         .then(response => response.json())
         .then(result => {
-        this.tableData = result.map(file => ({ ...file, selected: false }));
-        this.updateStats();
-        const savedSortOption = localStorage.getItem('sortOption');
-        if (savedSortOption) {
-            this.sortOption = savedSortOption;
-        }
-        this.sortData(this.tableData);
+            this.tableData = result.map(file => ({ ...file, selected: false }));
+            this.updateStats();
+            const savedSortOption = localStorage.getItem('sortOption');
+            if (savedSortOption) {
+                this.sortOption = savedSortOption;
+            }
+            this.sortData(this.tableData);
         })
-        .catch(() => this.$message.error('同步数据时出错，请检查网络连接'));
+        .catch((err) => {
+            if (err.message !== 'Unauthorized') {
+                this.$message.error('同步数据时出错，请检查网络连接');
+            }
+        });
     }
 };
 </script>