fix: 修复路由和页面加载问题

v3
veypi 1 week ago
parent e5308f9471
commit 983a5651a3

@ -13,7 +13,7 @@ import (
type ListRequest struct { type ListRequest struct {
Page int `json:"page" src:"query" default:"1"` Page int `json:"page" src:"query" default:"1"`
PageSize int `json:"page_size" src:"query" default:"20"` PageSize int `json:"page_size" src:"query" default:"20"`
Keyword string `json:"keyword" src:"query"` Keyword string `json:"keyword" src:"query" default:""`
} }
type ListResponse struct { type ListResponse struct {

@ -28,7 +28,7 @@ export default async ($env) => {
try { try {
await vbase.refresh(); await vbase.refresh();
} catch (e) { } catch (e) {
vbase.logout(to.fullPath); vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
return false; return false;
} }
} }
@ -37,7 +37,7 @@ export default async ($env) => {
try { try {
await vbase.fetchUser(); await vbase.fetchUser();
} catch (e) { } catch (e) {
vbase.logout(to.fullPath); vbase.logout('/login?redirect=' + encodeURIComponent(to.fullPath));
return false; return false;
} }
} }
@ -50,11 +50,6 @@ export default async ($env) => {
return false; return false;
} }
} }
} else if (isGuest) {
if (!vbase.isExpired()) {
next('/');
return false;
}
} }
next(); next();

@ -157,12 +157,12 @@
// Define Menu Items // Define Menu Items
menuItems = [ menuItems = [
{label: $t('nav.dashboard'), icon: "<i class='fas fa-tachometer-alt'></i>", path: "/"}, {label: () => $t('nav.dashboard'), icon: "<i class='fas fa-tachometer-alt'></i>", path: "/"},
{label: $t('nav.org'), icon: "<i class='fas fa-sitemap'></i>", path: "/org"}, {label: () => $t('nav.org'), icon: "<i class='fas fa-sitemap'></i>", path: "/org"},
{label: $t('nav.profile'), icon: "<i class='fas fa-user'></i>", path: "/profile"}, {label: () => $t('nav.profile'), icon: "<i class='fas fa-user'></i>", path: "/profile"},
// Admin only items would be filtered here ideally // Admin only items would be filtered here ideally
{label: $t('nav.users'), icon: "<i class='fas fa-users-cog'></i>", path: "/users"}, {label: () => $t('nav.users'), icon: "<i class='fas fa-users-cog'></i>", path: "/users"},
{label: $t('nav.oauth'), icon: "<i class='fas fa-key'></i>", path: "/oauth/apps"}, {label: () => $t('nav.oauth'), icon: "<i class='fas fa-key'></i>", path: "/oauth/apps"},
]; ];
currentRouteName = ""; currentRouteName = "";
@ -186,34 +186,12 @@
}; };
</script> </script>
<script> <script>
$watch(() => $env.$route.path, () => { $router.onChange(() => {
// Update breadcrumb or active item const path = $router.current.path;
// v-sidebar handles active state via path matching usually console.log(path)
// We can update title based on route name
// For now just simple mapping or rely on $route
// $data.currentRouteName = $env.$route.name || $env.$route.path
// Simple implementation:
const path = $env.$route.path;
const item = $data.menuItems.find(i => i.path === path); const item = $data.menuItems.find(i => i.path === path);
$data.currentRouteName = item ? item.label : path; $data.currentRouteName = item ? item.label : path;
}); });
// Watch global state for user/org changes
$watch(() => [$env.$vbase.user, $env.$i18n.locale], () => {
$data.user = $env.$vbase.user;
// Re-generate menu items when locale changes
$data.menuItems = [
{label: $t('nav.dashboard'), icon: "<i class='fas fa-tachometer-alt'></i>", path: "/"},
{label: $t('nav.org'), icon: "<i class='fas fa-sitemap'></i>", path: "/org"},
{label: $t('nav.profile'), icon: "<i class='fas fa-user'></i>", path: "/profile"},
// Admin only items would be filtered here ideally
{label: $t('nav.users'), icon: "<i class='fas fa-users-cog'></i>", path: "/users"},
{label: $t('nav.oauth'), icon: "<i class='fas fa-key'></i>", path: "/oauth/apps"},
];
});
$watch(() => $env.$vbase.currentOrg, () => {
$data.currentOrg = $env.$vbase.currentOrg;
});
</script> </script>
</html> </html>

@ -73,7 +73,6 @@
</head> </head>
<body> <body>
123
<h2 class="login-title">{{ $t('auth.login') }}</h2> <h2 class="login-title">{{ $t('auth.login') }}</h2>
<div v-if="error" class="error-msg">{{ error }}</div> <div v-if="error" class="error-msg">{{ error }}</div>
@ -106,7 +105,8 @@
error = ""; error = "";
try { try {
await $env.$vbase.login(username, password); await $env.$vbase.login(username, password);
$router.push('/'); const redirect = $router.query.redirect || '/';
$router.push(redirect);
} catch (err) { } catch (err) {
error = err.message || "Login failed"; error = err.message || "Login failed";
} }

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="description" content="Dashboard"> <meta name="description" content="Dashboard">
<title>{{ $t('nav.dashboard') }}</title> <title>{{ $t('nav.dashboard') }}</title>
@ -9,11 +10,13 @@
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px; gap: 20px;
} }
.stat-card { .stat-card {
background: #fff; background: #fff;
padding: 20px; padding: 20px;
@ -23,15 +26,18 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
.stat-title { .stat-title {
font-size: 14px; font-size: 14px;
color: var(--text-color-secondary); color: var(--text-color-secondary);
} }
.stat-value { .stat-value {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: var(--color-primary); color: var(--color-primary);
} }
.chart-container { .chart-container {
background: #fff; background: #fff;
padding: 20px; padding: 20px;
@ -41,6 +47,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div class="dashboard-container"> <div class="dashboard-container">
<h1>{{ $t('nav.dashboard') }}</h1> <h1>{{ $t('nav.dashboard') }}</h1>
@ -57,10 +64,10 @@
</body> </body>
<script setup> <script setup>
stats = [ stats = [
{ title: "Total Users", value: "1,234" }, {title: "Total Users", value: "1,234"},
{ title: "Active Orgs", value: "56" }, {title: "Active Orgs", value: "56"},
{ title: "API Calls", value: "89.2k" }, {title: "API Calls", value: "89.2k"},
{ title: "Revenue", value: "$12,340" } {title: "Revenue", value: "$12,340"}
]; ];
// Mock data fetch // Mock data fetch
@ -112,4 +119,5 @@
// Run after mount // Run after mount
$data.initChart(); $data.initChart();
</script> </script>
</html> </html>

@ -1,7 +1,7 @@
const routes = [ const routes = [
// Public // Public
{ path: '/login', component: '/page/auth/login.html', layout: 'public', meta: { guest: true } }, { path: '/login', component: '/page/auth/login.html', layout: 'public' },
{ path: '/register', component: '/page/auth/register.html', layout: 'public', meta: { guest: true } }, { path: '/register', component: '/page/auth/register.html', layout: 'public' },
// Dashboard (Default Layout) // Dashboard (Default Layout)
{ {

@ -61,7 +61,10 @@ class VBase {
const resData = await response.json(); const resData = await response.json();
if (!response.ok) { if (!response.ok) {
throw resData || new Error(`Request failed: ${response.status}`); // Include resData in the error so caller can access the response body
const error = new Error(resData.message || `Request failed: ${response.status}`);
Object.assign(error, resData);
throw error;
} }
if (resData.code && resData.code !== 200) { if (resData.code && resData.code !== 200) {
@ -75,10 +78,10 @@ class VBase {
async login(username, password) { async login(username, password) {
try { try {
const data = await this.request('POST', '/api/auth/login', { username, password }); const data = await this.request('POST', '/api/auth/login', { username, password });
if (data.access) { if (data.access_token) {
this.token = data.access; this.token = data.access_token;
if (data.refresh) this.refreshToken = data.refresh; if (data.refresh_token) this.refreshToken = data.refresh_token;
await this.fetchUser(); this.user = data.user; // Set user directly from login response
return true; return true;
} }
return false; return false;
@ -106,10 +109,10 @@ class VBase {
async refresh() { async refresh() {
if (!this.refreshToken) throw new Error("No refresh token"); if (!this.refreshToken) throw new Error("No refresh token");
try { try {
const data = await this.request('POST', '/api/auth/refresh', { refresh: this.refreshToken }); const data = await this.request('POST', '/api/auth/refresh', { refresh_token: this.refreshToken });
if (data.access) { if (data.access_token) {
this.token = data.access; this.token = data.access_token;
if (data.refresh) this.refreshToken = data.refresh; if (data.refresh_token) this.refreshToken = data.refresh_token;
return true; return true;
} }
return false; return false;
@ -205,7 +208,7 @@ class VBase {
originalRequest.headers['Authorization'] = headers['Authorization']; originalRequest.headers['Authorization'] = headers['Authorization'];
return axiosInstance(originalRequest); return axiosInstance(originalRequest);
} catch (e) { } catch (e) {
this.logout(window.location.pathname); this.logout('/login?redirect=' + encodeURIComponent(window.location.pathname));
return Promise.reject(e); return Promise.reject(e);
} }
} }

Loading…
Cancel
Save