From 6552ebf832f1739b7f2516ebcc105ab9f5b773ce Mon Sep 17 00:00:00 2001
From: veypi <i@veypi.com>
Date: Thu, 2 Apr 2026 17:37:02 +0800
Subject: [PATCH] refactor(ui): Migrate router guard from env.js to routes.js

    - Move beforeEnter router guard logic from env.js to routes.js export function
    - Update $env references to $mod in env.js, ico.html, and layout/default.html
    - Export routes as function that receives $mod context for dependency injection
    - Remove router guard from env.js initialization module
---
 ui/env.js              | 50 ++++++------------------------------------
 ui/ico.html            | 11 +++++-----
 ui/layout/default.html |  2 +-
 ui/routes.js           | 40 ++++++++++++++++++++++++++++++++-
 4 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/ui/env.js b/ui/env.js
index 5c73cd2..f80eb0b 100644
--- a/ui/env.js
+++ b/ui/env.js
@@ -1,63 +1,27 @@
 
 import VBase from './vbase.js'
 
-export default async ($env) => {
+export default async ($mod) => {
   // Load i18n
   try {
-    const langs = await (await fetch($env.scoped + '/langs.json')).json()
-    $env.$i18n.load(langs)
+    const langs = await (await fetch($mod.scoped + '/langs.json')).json()
+    $mod.$i18n.load(langs)
   } catch (e) {
     console.error('Failed to load langs.json', e)
   }
 
   // Initialize VBase Service
-  const vbase = new VBase('vb', $env.scoped); // Relative path
-  $env.$vbase = vbase;
+  const vbase = new VBase('vb', $mod.scoped); // Relative path
+  $mod.$vbase = vbase;
 
   // Wrap Axios: add auth header
-  vbase.wrapAxios($env.$axios);
+  vbase.wrapAxios($mod.$axios);
 
-  $env.$axios.interceptors.response.use(function(response) {
+  $mod.$axios.interceptors.response.use(function(response) {
     return response?.data
   }, function(error) {
     let data = error.response ? error.response.data : error.response
     return Promise.reject(data?.message || data);
   });
 
-  // Router Guard
-  $env.$router.beforeEnter = async (to, from, next) => {
-    const isAuth = to.meta && to.meta.auth;
-    const roles = to.meta && to.meta.roles; // Array of required roles
-
-    if (isAuth) {
-      if (vbase.isExpired()) {
-        try {
-          await vbase.refresh();
-        } catch (e) {
-          vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
-          return false;
-        }
-      }
-
-      if (!vbase.user) {
-        try {
-          await vbase.fetchUser();
-        } catch (e) {
-          vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
-          return false;
-        }
-      }
-
-      // Permission Check
-      if (to.meta.perm) {
-        if (!vbase.PermAdmin(to.meta.perm)) {
-          console.warn('Access denied: requires permission', to.meta.perm);
-          $env.$router.push('/403');
-          return false;
-        }
-      }
-    }
-
-    next();
-  };
 }
diff --git a/ui/ico.html b/ui/ico.html
index 37ebc9a..b31cd96 100644
--- a/ui/ico.html
+++ b/ui/ico.html
@@ -45,23 +45,24 @@
     </v-dropdown>
   </div>
   <div v-else>
-    <v-btn size="sm" variant="ghost" :click="() => $router.push('/login')" style="color: inherit; border-color: currentColor;">
+    <v-btn size="sm" variant="ghost" :click="() => $router.push('/login')"
+      style="color: inherit; border-color: currentColor;">
       登录
     </v-btn>
   </div>
 </body>
 <script setup>
-  user = $env.$vbase.user;
+  user = $mod.$vbase.user;
   dropdownItems = [
-    { label: "个人中心", value: "profile" },
-    { label: "退出登录", value: "logout", divided: true }
+    {label: "个人中心", value: "profile"},
+    {label: "退出登录", value: "logout", divided: true}
   ];
 
   handleCommand = (val) => {
     if (val === 'profile') {
       $router.push('/profile');
     } else if (val === 'logout') {
-      $env.$vbase.logout();
+      $mod.$vbase.logout();
     }
   };
 </script>
diff --git a/ui/layout/default.html b/ui/layout/default.html
index 447dc29..07896f6 100644
--- a/ui/layout/default.html
+++ b/ui/layout/default.html
@@ -123,7 +123,7 @@
 </body>
 <script setup>
   collapsed = false;
-  user = $env.$vbase.user;
+  user = $mod.$vbase.user;
 
   // Define Menu Items
   menuItems = [
diff --git a/ui/routes.js b/ui/routes.js
index 01b7b80..bace3f4 100644
--- a/ui/routes.js
+++ b/ui/routes.js
@@ -35,4 +35,42 @@ const routes = [
   { path: '*', component: '/page/404.html' }
 ]
 
-export default routes
+export default ({ $mod }) => ({
+  routes: routes,
+  beforeEnter: async (to, from, next) => {
+    const isAuth = to.meta && to.meta.auth;
+    const roles = to.meta && to.meta.roles; // Array of required roles
+    const vbase = $mod.$vbase
+
+    if (isAuth) {
+      if (vbase.isExpired()) {
+        try {
+          await vbase.refresh();
+        } catch (e) {
+          vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
+          return false;
+        }
+      }
+
+      if (!vbase.user) {
+        try {
+          await vbase.fetchUser();
+        } catch (e) {
+          vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
+          return false;
+        }
+      }
+
+      // Permission Check
+      if (to.meta.perm) {
+        if (!vbase.PermAdmin(to.meta.perm)) {
+          console.warn('Access denied: requires permission', to.meta.perm);
+          $mod.$router.push('/403');
+          return false;
+        }
+      }
+    }
+
+    next();
+  }
+})