test pages

fr33t · Nov 12, 2024 · fbdce9f · fbdce9f
1 parent 48f6917
commit fbdce9f
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "node-forge": "^1.3.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
+    "vue-router": "^4.4.5",
     "vuetify": "^3.7.4"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-app>
-    <v-main>
-      <Jwt />
-    </v-main>
-  </v-app>
+  <router-view></router-view>
 </template>
 
 <script setup lang="ts">

diff --git a/src/main.ts b/src/main.ts
@@ -5,16 +5,18 @@
  */
 
 // Plugins
-import { registerPlugins } from '@/plugins'
+import { registerPlugins } from "@/plugins";
 
 // Components
-import App from './App.vue'
+import App from "./App.vue";
 
 // Composables
-import { createApp } from 'vue'
+import { createApp } from "vue";
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-registerPlugins(app)
+registerPlugins(app);
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const routes = [
+  { path: "/", component: () => import("../views/Jwt.vue") },
+  {
+    path: "/jku",
+    beforeEnter: (to, from, next) => {
+      console.log("jku");
+      const jsonResponse = {
+        name: "John Doe",
+        age: 30,
+        country: "USA",
+      };
+
+      // 将 JSON 数据直接写入到页面，避免 HTML 渲染
+      document.body.innerHTML = `<pre>${JSON.stringify(
+        jsonResponse,
+        null,
+        2
+      )}</pre>`;
+
+      // 直接结束路由导航，不继续渲染组件
+      next(false);
+      next(false);
+    },
+    component: () => import("../views/Jwt.vue"),
+  },
+  {
+    path: "/:catchAll(.*)",
+    component: () => import("../views/Notfound.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/components/Jwt.vue → src/views/Jwt.vue b/src/components/Jwt.vue → src/views/Jwt.vue
@@ -315,59 +315,65 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="d-flex justify-center">
-        <div class="d-flex flex-column w-75">
+    <v-app>
+        <v-main>
+
+
+            <div class="d-flex justify-center">
+                <div class="d-flex flex-column w-75">
+
+                    <div class="d-flex justify-space-between mt-10">
+
+                        <v-btn @mousedown="(event: MouseEvent) => {
+
+                            if (event.button === 0) {
+                                decodeJwt()
+                            } else if (event.button === 1) {
+                                clearJwt()
+                            }
+                        }" variant="text">
+                            <h1>JWT-ALL</h1>
+                        </v-btn>
+
+                        <p>Click <b>JWT-ALL</b> to decode jwt! Middle to Clear!</p>
+
+
+                        <div class="w-33"></div>
+                        <v-text-field class="mr-4" v-model="jwt_secret_key" label="Secret Key" variant="outlined"
+                            @blur="encodeJwt"></v-text-field>
+                        <v-select width="100px" label="Alg" v-model="selected_alg" :items=algs variant="outlined"
+                            @vue:mounted="select_alg" @update:model-value="select_alg"></v-select>
+                    </div>
+
+                    <div>
+                        <v-textarea rows="5" label="S-JWT" variant="outlined" no-resize v-model="sjwt"></v-textarea>
+                        <div class="d-flex">
+                            <v-textarea rows="10" class="mr-2" label="Header" variant="outlined" no-resize
+                                v-model="header" @blur="encodeJwt"></v-textarea>
+                            <v-textarea rows="10" class="mr-2" label="Payload" variant="outlined" no-resize
+                                v-model="payload" @blur="encodeJwt"></v-textarea>
+                            <v-textarea rows="10" label="Verify Signature" variant="outlined" no-resize
+                                v-model="signature_type" readonly></v-textarea>
+                        </div>
+                    </div>
+
+
+                    <v-textarea rows="5" label="T-JWT" variant="outlined" no-resize v-model="tjwt"></v-textarea>
+                    <div class="d-flex">
+                        <v-btn @click="none_attack">None</v-btn>
+                        <v-btn class="ml-4" @click="no_sign_attack">No Sign</v-btn>
+                        <v-btn class="ml-4" @click="brute_force_attack">Brute</v-btn>
+                        <v-btn class="ml-4" @click="jwk_injection_attack">JWK IJ</v-btn>
+                        <v-btn class="ml-4" @click="jku_injection_attack">JKU IJ</v-btn>
+                        <v-btn class="ml-4">KID PATH</v-btn>
+                    </div>
+                    <p class="mt-4">Dictionary: <a
+                            href="https://github.com/wallarm/jwt-secrets">https://github.com/wallarm/jwt-secrets</a></p>
 
-            <div class="d-flex justify-space-between mt-10">
-
-                <v-btn @mousedown="(event: MouseEvent) => {
-
-                    if (event.button === 0) {
-                        decodeJwt()
-                    } else if (event.button === 1) {
-                        clearJwt()
-                    }
-                }" variant="text">
-                    <h1>JWT-ALL</h1>
-                </v-btn>
-
-                <p>Click <b>JWT-ALL</b> to decode jwt! Middle to Clear!</p>
-
-
-                <div class="w-33"></div>
-                <v-text-field class="mr-4" v-model="jwt_secret_key" label="Secret Key" variant="outlined"
-                    @blur="encodeJwt"></v-text-field>
-                <v-select width="100px" label="Alg" v-model="selected_alg" :items=algs variant="outlined"
-                    @vue:mounted="select_alg" @update:model-value="select_alg"></v-select>
-            </div>
-
-            <div>
-                <v-textarea rows="5" label="S-JWT" variant="outlined" no-resize v-model="sjwt"></v-textarea>
-                <div class="d-flex">
-                    <v-textarea rows="10" class="mr-2" label="Header" variant="outlined" no-resize v-model="header"
-                        @blur="encodeJwt"></v-textarea>
-                    <v-textarea rows="10" class="mr-2" label="Payload" variant="outlined" no-resize v-model="payload"
-                        @blur="encodeJwt"></v-textarea>
-                    <v-textarea rows="10" label="Verify Signature" variant="outlined" no-resize v-model="signature_type"
-                        readonly></v-textarea>
                 </div>
-            </div>
 
 
-            <v-textarea rows="5" label="T-JWT" variant="outlined" no-resize v-model="tjwt"></v-textarea>
-            <div class="d-flex">
-                <v-btn @click="none_attack">None</v-btn>
-                <v-btn class="ml-4" @click="no_sign_attack">No Sign</v-btn>
-                <v-btn class="ml-4" @click="brute_force_attack">Brute</v-btn>
-                <v-btn class="ml-4" @click="jwk_injection_attack">JWK IJ</v-btn>
-                <v-btn class="ml-4" @click="jku_injection_attack">JKU IJ</v-btn>
-                <v-btn class="ml-4">KID PATH</v-btn>
             </div>
-            <p class="mt-4">Dictionary: <a
-                    href="https://github.com/wallarm/jwt-secrets">https://github.com/wallarm/jwt-secrets</a></p>
-
-        </div>
-
-
-    </div>
+        </v-main>
+    </v-app>
 </template>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        Not Found
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>