feat: 添加路由守卫，优化路由管理并清理钱包卡片组件逻辑

src/App.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import { client, safeClient } from "./api";
+
+const walletStore = useWalletStore();
+
+onMounted(async () => {
+  const { data } = await safeClient(client.api.asset.balances.get());
+  walletStore.state.balances = data;
+  console.log("App mounted successfully");
+});
 </script>
 
 <template>

src/main.ts

@@ -2,9 +2,8 @@ import { IonicVue } from "@ionic/vue";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";
-
 import { i18n } from "./locales";
-import router from "./router";
+import { router } from "./router";
 
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/vue/css/core.css";
@@ -42,8 +41,8 @@ const pinia = createPinia();
 
 const app = createApp(App)
   .use(IonicVue)
-  .use(router)
   .use(pinia)
+  .use(router)
   .use(i18n);
 
 router.isReady().then(() => {

src/router/guard.ts

@@ -0,0 +1,7 @@
+import type { Router } from "vue-router";
+
+export function createRouterGuard(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    next();
+  });
+}

src/router/index.ts

@@ -1,5 +1,6 @@
 import type { RouteRecordRaw } from "vue-router";
 import { createRouter, createWebHistory } from "@ionic/vue-router";
+import { createRouterGuard } from "./guard";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -64,4 +65,6 @@ const router = createRouter({
   routes,
 });
 
-export default router;
+createRouterGuard(router);
+
+export { router };

src/views/user/components/wallet-card.vue

@@ -1,6 +1,4 @@
 <script lang='ts' setup>
-import { onIonViewDidEnter, onIonViewWillEnter } from "@ionic/vue";
-import { client } from "@/api";
 import RechargeChannel from "./recharge-channel.vue";
 
 const { t } = useI18n();
@@ -8,28 +6,12 @@ const router = useRouter();
 const { state } = useWalletStore();
 const rechargeInstance = ref<ModalInstance>();
 
-async function init() {
-  const { data } = await client.api.asset.balances.get();
-  state.balances = data;
-}
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
 }
 function handleWithdraw() {
   router.push("/withdraw/index");
 }
-
-onMounted(() => {
-  init();
-});
-
-onIonViewWillEnter(() => {
-  init();
-});
-
-onIonViewDidEnter(() => {
-  init();
-});
 </script>
 
 <template>