Merge pull request #616 from Ander-pixe/webui-new

fix：路由守卫

napcat.webui/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "eslint-plugin-prettier": "^5.2.1",
     "event-source-polyfill": "^1.0.31",
+    "mitt": "^3.0.1",
     "qrcode": "^1.5.4",
     "tdesign-icons-vue-next": "^0.3.3",
     "tdesign-vue-next": "^1.10.3",

napcat.webui/src/backend/githubApi.ts

@@ -1,7 +1,7 @@
 export class githubApiManager {
     public async GetBaseData(): Promise<Response | null> {
         try {
-            const ConfigResponse= await fetch('https://api.github.com/repos/NapNeko/NapCatQQ', {
+            const ConfigResponse = await fetch('https://api.github.com/repos/NapNeko/NapCatQQ', {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',

napcat.webui/src/backend/log.ts

@@ -1,3 +1,5 @@
+import { request } from '@/utils/request.js';
+
 import { EventSourcePolyfill } from 'event-source-polyfill';
 type LogListItem = string;
 type LogListData = LogListItem[];
@@ -13,7 +15,7 @@ export class LogManager {
     }
     public async GetLogList(): Promise<LogListData> {
         try {
-            const ConfigResponse = await fetch(`${this.apiPrefix}/Log/GetLogList`, {
+            const ConfigResponse = await request(`${this.apiPrefix}/Log/GetLogList`, {
                 method: 'GET',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -33,7 +35,7 @@ export class LogManager {
     }
     public async GetLog(FileName: string): Promise<string> {
         try {
-            const ConfigResponse = await fetch(`${this.apiPrefix}/Log/GetLog?id=${FileName}`, {
+            const ConfigResponse = await request(`${this.apiPrefix}/Log/GetLog?id=${FileName}`, {
                 method: 'GET',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,

napcat.webui/src/backend/shell.ts

@@ -1,3 +1,4 @@
+import { request } from '@/utils/request.js';
 import { OneBotConfig } from '../../../src/onebot/config/config';
 
 export class QQLoginManager {
@@ -13,7 +14,7 @@ export class QQLoginManager {
     // TODO:
     public async GetOB11Config(): Promise<OneBotConfig> {
         try {
-            const ConfigResponse = await fetch(`${this.apiPrefix}/OB11Config/GetConfig`, {
+            const ConfigResponse = await request(`${this.apiPrefix}/OB11Config/GetConfig`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -34,7 +35,7 @@ export class QQLoginManager {
 
     public async SetOB11Config(config: OneBotConfig): Promise<boolean> {
         try {
-            const ConfigResponse = await fetch(`${this.apiPrefix}/OB11Config/SetConfig`, {
+            const ConfigResponse = await request(`${this.apiPrefix}/OB11Config/SetConfig`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -56,7 +57,7 @@ export class QQLoginManager {
 
     public async checkQQLoginStatus(): Promise<boolean> {
         try {
-            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
+            const QQLoginResponse = await request(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -76,7 +77,7 @@ export class QQLoginManager {
     }
     public async checkQQLoginStatusWithQrcode(): Promise<{ qrcodeurl: string; isLogin: string } | undefined> {
         try {
-            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
+            const QQLoginResponse = await request(`${this.apiPrefix}/QQLogin/CheckLoginStatus`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -97,7 +98,7 @@ export class QQLoginManager {
 
     public async checkWebUiLogined(): Promise<boolean> {
         try {
-            const LoginResponse = await fetch(`${this.apiPrefix}/auth/check`, {
+            const LoginResponse = await request(`${this.apiPrefix}/auth/check`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -118,7 +119,7 @@ export class QQLoginManager {
 
     public async loginWithToken(token: string): Promise<string | null> {
         try {
-            const loginResponse = await fetch(`${this.apiPrefix}/auth/login`, {
+            const loginResponse = await request(`${this.apiPrefix}/auth/login`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -139,7 +140,7 @@ export class QQLoginManager {
 
     public async getQQLoginQrcode(): Promise<string> {
         try {
-            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/GetQQLoginQrcode`, {
+            const QQLoginResponse = await request(`${this.apiPrefix}/QQLogin/GetQQLoginQrcode`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -160,7 +161,7 @@ export class QQLoginManager {
 
     public async getQQQuickLoginList(): Promise<string[]> {
         try {
-            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/GetQuickLoginList`, {
+            const QQLoginResponse = await request(`${this.apiPrefix}/QQLogin/GetQuickLoginList`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,
@@ -181,7 +182,7 @@ export class QQLoginManager {
 
     public async setQuickLogin(uin: string): Promise<{ result: boolean; errMsg: string }> {
         try {
-            const QQLoginResponse = await fetch(`${this.apiPrefix}/QQLogin/SetQuickLogin`, {
+            const QQLoginResponse = await request(`${this.apiPrefix}/QQLogin/SetQuickLogin`, {
                 method: 'POST',
                 headers: {
                     Authorization: 'Bearer ' + this.retCredential,

napcat.webui/src/components/webui/Nav.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import emitter from '@/ts/event-bus';
 
 type MenuItem = {

napcat.webui/src/components/webui/NavBottom.vue

@@ -1,5 +1,5 @@
 <template>
-    <t-head-menu theme="light"  class="bottom-menu">
+    <t-head-menu theme="light" class="bottom-menu">
         <router-link v-for="item in menuItems" :key="item.value" :to="item.route">
             <t-tooltip :content="item.label" placement="top">
                 <t-menu-item :value="item.value" :disabled="item.disabled" class="menu-item">
@@ -7,15 +7,13 @@
                         <t-icon :name="item.icon" />
                     </template>
 
-<!--                    {{item.label}}-->
+                    <!--                    {{item.label}}-->
                 </t-menu-item>
             </t-tooltip>
         </router-link>
     </t-head-menu>
 </template>
 <script setup lang="ts">
-import { defineProps } from 'vue';
-
 type MenuItem = {
     value: string;
     label: string;

napcat.webui/src/main.ts

@@ -46,7 +46,7 @@ import {
     Loading as TLoading,
     HeadMenu as THeadMenu
 } from 'tdesign-vue-next';
-import { router } from './router';
+import router from './router';
 import 'tdesign-vue-next/es/style/index.css';
 const app = createApp(App);
 app.use(router);

napcat.webui/src/pages/network/HttpClientComponent.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { HttpClientConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{

napcat.webui/src/pages/network/HttpServerComponent.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { HttpServerConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{

napcat.webui/src/pages/network/WebsocketClientComponent.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { WebsocketClientConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{

napcat.webui/src/pages/network/WebsocketServerComponent.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { WebsocketServerConfig } from '../../../../src/onebot/config/config';
 
 const props = defineProps<{

napcat.webui/src/router/index.ts

@@ -7,6 +7,7 @@ import NetWork from '../pages/NetWork.vue';
 import QQLogin from '../components/QQLogin.vue';
 import WebUiLogin from '../components/WebUiLogin.vue';
 import OtherConfig from '../pages/OtherConfig.vue';
+import { MessagePlugin } from 'tdesign-vue-next';
 
 const routes: Array<RouteRecordRaw> = [
     { path: '/', redirect: '/webui' },
@@ -26,7 +27,22 @@ const routes: Array<RouteRecordRaw> = [
     },
 ];
 
-export const router = createRouter({
+const router = createRouter({
     history: createWebHashHistory(),
     routes,
 });
+
+router.beforeEach((to, from, next) => {
+    const token = localStorage.getItem('auth');
+    if (!token && to.path !== '/webui' && to.path !== '/qqlogin') {
+        MessagePlugin.error('Token 过期啦, 重新登录吧');
+        localStorage.clear();
+        setTimeout(() => {
+            next('/webui');
+        }, 500);
+    } else {
+        next();
+    }
+});
+
+export default router;

napcat.webui/src/utils/request.ts

@@ -0,0 +1,14 @@
+import { MessagePlugin } from 'tdesign-vue-next';
+import router from '@/router/index.js';
+
+export const request = async (input: RequestInfo | URL, init?: RequestInit) => {
+    const res = await fetch(input, init);
+    const json = await res.json();
+    if (json.message.includes('Unauthorized')) {
+        MessagePlugin.error('Token 过期啦, 重新登录吧');
+        localStorage.clear();
+        router.push('/webui');
+    }
+    res.json = async () => json;
+    return res;
+};

napcat.webui/tsconfig.json

@@ -3,22 +3,15 @@
         "target": "ESNext",
         "jsx": "preserve",
         "jsxImportSource": "vue",
-        "lib": [
+        "lib": ["DOM", "DOM.Iterable", "ES2022"],
-            "DOM",
-            "DOM.Iterable"
-        ],
         "baseUrl": ".",
         "module": "esnext",
         "moduleResolution": "bundler",
         "paths": {
-            "@/*": [
+            "@/*": ["src/*"]
-                "src/*"
-            ]
         },
         "resolveJsonModule": true,
-        "types": [
+        "types": ["vite/client"],
-            "vite/client"
-        ],
         "strict": true,
         "strictNullChecks": true,
         "noUnusedLocals": true,
@@ -30,5 +23,5 @@
     },
     "include": ["src"],
     "exclude": ["node_modules"],
-    "references": [{"path": "./tsconfig.node.json"}]
+    "references": [{ "path": "./tsconfig.node.json" }]
 }