fix: Login Check

napcat.webui/src/backend/log.ts

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

napcat.webui/src/backend/shell.ts

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

napcat.webui/src/components/QQLogin.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
 import * as QRCode from 'qrcode';
 import { useRouter } from 'vue-router';
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -41,6 +41,7 @@ const qrcodeCanvas = ref<HTMLCanvasElement | null>(null);
 const qqLoginManager = new QQLoginManager(localStorage.getItem('auth') || '');
 let heartBeatTimer: number | null = null;
 let qrcodeUrl: string = '';
+
 const selectAccount = async (accountName: string): Promise<void> => {
     const { result, errMsg } = await qqLoginManager.setQuickLogin(accountName);
     if (result) {
@@ -74,10 +75,6 @@ const HeartBeat = async (): Promise<void> => {
         if (heartBeatTimer) {
             clearInterval(heartBeatTimer);
         }
-        // //判断是否已经调转
-        // if (router.currentRoute.value.path !== '/dashboard/basic-info') {
-        //     return;
-        // }
         await MessagePlugin.success('登录成功即将跳转');
         await router.push({ path: '/dashboard/basic-info' });
     } else if (isLogined?.qrcodeurl && qrcodeUrl !== isLogined.qrcodeurl) {
@@ -89,6 +86,7 @@ const HeartBeat = async (): Promise<void> => {
 const InitPages = async (): Promise<void> => {
     quickLoginList.value = await qqLoginManager.getQQQuickLoginList();
     qrcodeUrl = await qqLoginManager.getQQLoginQrcode();
+    await nextTick();
     generateQrCode(qrcodeUrl, qrcodeCanvas.value);
 };
 
@@ -103,6 +101,14 @@ onBeforeUnmount(() => {
     if (heartBeatTimer) {
         clearInterval(heartBeatTimer);
     }
+
+});
+
+watch(loginMethod, async (newMethod) => {
+    if (newMethod === 'qrcode') {
+        await nextTick();
+        generateQrCode(qrcodeUrl, qrcodeCanvas.value);
+    }
 });
 
 </script>
@@ -178,4 +184,4 @@ onBeforeUnmount(() => {
     left: 0;
     right: 0;
 }
-</style>
+</style>

napcat.webui/src/router/index.ts

@@ -8,6 +8,7 @@ import QQLogin from '../components/QQLogin.vue';
 import WebUiLogin from '../components/WebUiLogin.vue';
 import OtherConfig from '../pages/OtherConfig.vue';
 import { MessagePlugin } from 'tdesign-vue-next';
+import { QQLoginManager } from '@/backend/shell';
 
 const routes: Array<RouteRecordRaw> = [
     { path: '/', redirect: '/webui' },
@@ -32,17 +33,22 @@ const router = createRouter({
     routes,
 });
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
+    const isPublicRoute = ['/webui', '/qqlogin'].includes(to.path);
     const token = localStorage.getItem('auth');
-    if (!token && to.path !== '/webui' && to.path !== '/qqlogin') {
-        MessagePlugin.error('Token 过期啦, 重新登录吧');
-        localStorage.clear();
-        setTimeout(() => {
-            next('/webui');
-        }, 500);
-    } else {
-        next();
+
+    if (!isPublicRoute) {
+        if (!token) {
+            MessagePlugin.error('请先登录');
+            return next('/webui');
+        }
+        const login = await new QQLoginManager(token).checkWebUiLogined();
+        if (!login) {
+            MessagePlugin.error('请先登录');
+            return next('/webui');
+        }
     }
+    next();
 });
 
 export default router;

napcat.webui/src/utils/request.ts

@@ -1,14 +0,0 @@
-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;
-};