feat(auth): 重构权限管理系统和路由结构

web/src/App.vue

@@ -1,64 +1,15 @@
 <script setup lang="ts">
-import {ref, watch} from 'vue'
-import {useRoute, useRouter} from "vue-router";
-import {useCounterStore} from "@/stores/counter.ts";
 
-const router = useRouter()
-const route = useRoute()
-
-const activeIndex = ref(route.name?.toString() || "TokenList")
-
-watch(route, (newRoute) => {
-  activeIndex.value = newRoute.name?.toString() || "TokenList"
-})
-
-const handleSelect = (key: string) => {
-  router.push({
-    name: key
-  })
-}
 </script>
 
-
 <template>
-  <el-container>
-    <el-header>
-      <el-menu
-          :default-active="activeIndex"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="handleSelect"
-      >
-        <el-menu-item index="TokenDetail">Token详细信息</el-menu-item>
-        <el-menu-item index="TokenManage">管理Token</el-menu-item>
-        <el-menu-item v-if="useCounterStore().isAdmin">
-          <el-button type="danger" plain @click="useCounterStore().isAdmin=false">退出管理员</el-button>
-        </el-menu-item>
-      </el-menu>
-
-    </el-header>
-
-    <el-container>
-      <el-main>
   <router-view></router-view>
-      </el-main>
-    </el-container>
-  </el-container>
 </template>
 
-
-<style>
+<style scoped>
 html, body, #app {
   height: 100%;
   margin: 0;
   padding: 0;
 }
-
-.el-container {
-  height: 100%;
-}
-
-.el-menu-demo {
-  line-height: 60px;
-}
 </style>

web/src/router/index.ts

@@ -2,10 +2,33 @@ import {createRouter, createWebHistory} from 'vue-router'
 
 import TokenManageView from '@/views/TokenManageView.vue'
 import TokenDetailView from '@/views/TokenDetailView.vue'
+import AdminView from '@/views/AdminView.vue'
+import HomeView from '@/views/HomeView.vue'
 
 const routes = [
-    {path: '/manage', name: "TokenManage", component: TokenManageView},
-    {path: '/', name: "TokenDetail", component: TokenDetailView},
+    {
+        path: '/',
+        name: "Home",
+        component: HomeView,
+    },
+    {
+        path: '/admin',
+        name: "Admin",
+        component: AdminView,
+        children: [
+            {
+                path: '',
+                name: "TokenManage",
+                component: TokenManageView
+            },
+            {
+                path: 'token',
+                name: "TokenDetail",
+                component: TokenDetailView
+            },
+        ],
+    },
+
 ];
 
 const router = createRouter({

web/src/stores/counter.ts

@@ -2,6 +2,8 @@ import {ref, computed} from 'vue'
 import {defineStore} from 'pinia'
 
 export const useCounterStore = defineStore('counter', () => {
+    const homeToken = ref("")
+
     const token = ref("")
 
     const isAdmin = ref(false)

web/src/views/AdminView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+import {useRoute, useRouter} from "vue-router";
+import {useCounterStore} from "@/stores/counter.ts";
+
+const router = useRouter()
+const route = useRoute()
+
+const activeIndex = ref(route.name?.toString() || "TokenList")
+
+watch(route, (newRoute) => {
+  activeIndex.value = newRoute.name?.toString() || "TokenList"
+})
+
+const handleSelect = (key: string) => {
+  router.push({
+    name: key
+  })
+}
+</script>
+
+<template>
+  <el-container>
+    <el-header>
+      <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+      >
+        <el-menu-item index="TokenManage">管理Token</el-menu-item>
+        <el-menu-item index="TokenDetail">Token详细信息</el-menu-item>
+        <el-menu-item v-if="useCounterStore().isAdmin">
+          <el-button type="danger" plain @click="useCounterStore().isAdmin=false">退出管理员</el-button>
+        </el-menu-item>
+      </el-menu>
+
+    </el-header>
+
+    <el-container>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+
+</style>

web/src/views/HomeView.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import axios from "@/axios.ts";
+import {useRoute} from "vue-router"
+import {ElMessage} from "element-plus";
+
+const token = ref(useRoute().query.token)
+const input = ref(useRoute().query.token)
+const result = ref()
+
+const inputChange = () => {
+  if (input.value != null && input.value != '') {
+    axios.get('/api/token/info', {
+      params: {
+        token: input.value
+      }
+    }).then(res => {
+      result.value = res.data.result
+      token.value = input.value
+      ElMessage({
+        message: '更改成功',
+        type: 'success',
+      })
+    }).catch(error => {
+      ElMessage({
+        message: 'Token输入错误',
+        type: 'error',
+      })
+    })
+  }
+}
+
+const getInfo = () => {
+  if (token.value != null && token.value != '') {
+    axios.get('/api/token/info', {
+      params: {
+        token: token.value
+      }
+    }).then(res => {
+      result.value = res.data.result
+    })
+  }
+}
+
+getInfo()
+setInterval(getInfo, 5000)
+</script>
+
+
+<template>
+  <b>当前Token：</b>
+  <el-input
+      v-model="input"
+      style="width: 240px"
+      placeholder="输入Token"
+      clearable
+      @change="inputChange"
+  />
+
+  <el-divider/>
+  <b>Token信息（每5秒刷新）</b>
+  <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
+  <el-descriptions
+      direction="vertical"
+      :column="4"
+      border
+  >
+    <el-descriptions-item label="去重对象">{{ result?.dedup_object }}</el-descriptions-item>
+    <el-descriptions-item label="上传数据格式">{{ result?.data_format }}</el-descriptions-item>
+    <el-descriptions-item label="去重记录值">{{ result?.dedup_items_number }}</el-descriptions-item>
+    <el-descriptions-item label="Redis中数据条数">{{ result?.cache_list_number }}</el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<style scoped>
+
+</style>

web/src/views/TokenDetailView.vue

@@ -70,9 +70,13 @@ axios.get('/api/token').then(res => {
 
 
 <template>
+  <div v-if="!useCounterStore().isAdmin">
+    <el-alert title="您没有权限访问此页面" type="error" center show-icon/>
+  </div>
+
+  <div v-if="useCounterStore().isAdmin">
     <b>当前Token：</b>
-  <b v-if="!useCounterStore().isAdmin">{{ route.query.token }}</b>
-  <el-select v-if="useCounterStore().isAdmin" v-model="value" placeholder="选择Token" style="width: 240px">
+    <el-select v-model="value" placeholder="选择Token" style="width: 240px">
       <el-option
           v-for="item in options"
           :key="item.value"
@@ -80,7 +84,6 @@ axios.get('/api/token').then(res => {
       />
     </el-select>
 
-
     <el-divider/>
     <b>Token信息（每5秒刷新）</b>
     <el-button type="primary" plain @click="getInfo">手动刷新</el-button>
@@ -95,9 +98,7 @@ axios.get('/api/token').then(res => {
       <el-descriptions-item label="Redis中数据条数">{{ result?.cache_list_number }}</el-descriptions-item>
     </el-descriptions>
 
-  <div v-if="useCounterStore().isAdmin">
     <p><b>管理</b></p>
-
     <el-button type="danger" @click="deleteDedup">删除去重记录值</el-button>
     <el-button type="danger" @click="deleteRedis">删除Redis数据</el-button>
   </div>

web/src/views/TokenManageView.vue

@@ -68,7 +68,6 @@ const viewDetails = (row: any) => {
   useCounterStore().token = row.token
   router.push({
     name: "TokenDetail",
-    query: {token: row.token}
   })
 }
 
@@ -169,7 +168,7 @@ const checkPassword = () => {
   <div v-if="!useCounterStore().isAdmin" style="margin: auto auto; max-width: 400px">
     <el-alert title="您没有权限访问此页面，输入管理员密码" type="error" :closable="false" show-icon/>
     <p></p>
-    <el-input v-model="inputPassWord" style="width: 400px" placeholder="请输入管理员密码"/>
+    <el-input v-model="inputPassWord" style="width: 400px" placeholder="请输入管理员密码" @change="checkPassword"/>
     <p></p>
     <el-button type="primary" @click="checkPassword">确认</el-button>
   </div>