feat: 更新超级管理员登录逻辑，添加路由守卫和用户统计功能
This commit is contained in:
@@ -14,151 +14,6 @@ const model = ref([
|
||||
{ label: 'Tenants', icon: 'pi pi-fw pi-building', to: '/superadmin/tenants' },
|
||||
{ label: 'Users', icon: 'pi pi-fw pi-users', to: '/superadmin/users' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'UI Components',
|
||||
items: [
|
||||
{ label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
|
||||
{ label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
|
||||
{ label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
|
||||
{ label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
|
||||
{ label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
|
||||
{ label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
|
||||
{ label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
|
||||
{ label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
|
||||
{ label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
|
||||
{ label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu' },
|
||||
{ label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
|
||||
{ label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
|
||||
{ label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
|
||||
{ label: 'Timeline', icon: 'pi pi-fw pi-calendar', to: '/uikit/timeline' },
|
||||
{ label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Prime Blocks',
|
||||
icon: 'pi pi-fw pi-prime',
|
||||
items: [
|
||||
{
|
||||
label: 'Free Blocks',
|
||||
icon: 'pi pi-fw pi-eye',
|
||||
to: '/blocks'
|
||||
},
|
||||
{
|
||||
label: 'All Blocks',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
url: 'https://blocks.primevue.org/',
|
||||
target: '_blank'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Pages',
|
||||
icon: 'pi pi-fw pi-briefcase',
|
||||
to: '/pages',
|
||||
items: [
|
||||
{
|
||||
label: 'Landing',
|
||||
icon: 'pi pi-fw pi-globe',
|
||||
to: '/landing'
|
||||
},
|
||||
{
|
||||
label: 'Auth',
|
||||
icon: 'pi pi-fw pi-user',
|
||||
items: [
|
||||
{
|
||||
label: 'Login',
|
||||
icon: 'pi pi-fw pi-sign-in',
|
||||
to: '/auth/login'
|
||||
},
|
||||
{
|
||||
label: 'Error',
|
||||
icon: 'pi pi-fw pi-times-circle',
|
||||
to: '/auth/error'
|
||||
},
|
||||
{
|
||||
label: 'Access Denied',
|
||||
icon: 'pi pi-fw pi-lock',
|
||||
to: '/auth/access'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Crud',
|
||||
icon: 'pi pi-fw pi-pencil',
|
||||
to: '/pages/crud'
|
||||
},
|
||||
{
|
||||
label: 'Not Found',
|
||||
icon: 'pi pi-fw pi-exclamation-circle',
|
||||
to: '/pages/notfound'
|
||||
},
|
||||
{
|
||||
label: 'Empty',
|
||||
icon: 'pi pi-fw pi-circle-off',
|
||||
to: '/pages/empty'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Hierarchy',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 1.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 1.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{
|
||||
label: 'Submenu 2.1',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [
|
||||
{ label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
|
||||
{ label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Submenu 2.2',
|
||||
icon: 'pi pi-fw pi-bookmark',
|
||||
items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Get Started',
|
||||
items: [
|
||||
{
|
||||
label: 'Documentation',
|
||||
icon: 'pi pi-fw pi-book',
|
||||
to: '/documentation'
|
||||
},
|
||||
{
|
||||
label: 'View Source',
|
||||
icon: 'pi pi-fw pi-github',
|
||||
url: 'https://github.com/primefaces/sakai-vue',
|
||||
target: '_blank'
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
<script setup>
|
||||
import { useLayout } from '@/layout/composables/layout';
|
||||
import { clearSuperAuthToken } from '@/service/auth';
|
||||
import AppConfigurator from './AppConfigurator.vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
|
||||
const router = useRouter();
|
||||
|
||||
async function logout() {
|
||||
clearSuperAuthToken();
|
||||
await router.push({ name: 'login' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -60,17 +68,9 @@ const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
|
||||
|
||||
<div class="layout-topbar-menu hidden lg:block">
|
||||
<div class="layout-topbar-menu-content">
|
||||
<button type="button" class="layout-topbar-action">
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Calendar</span>
|
||||
</button>
|
||||
<button type="button" class="layout-topbar-action">
|
||||
<i class="pi pi-inbox"></i>
|
||||
<span>Messages</span>
|
||||
</button>
|
||||
<button type="button" class="layout-topbar-action">
|
||||
<i class="pi pi-user"></i>
|
||||
<span>Profile</span>
|
||||
<button type="button" class="layout-topbar-action" @click="logout">
|
||||
<i class="pi pi-sign-out"></i>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import AppLayout from '@/layout/AppLayout.vue';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { clearSuperAuthToken, hasSuperAuthToken, refreshSuperToken } from '@/service/auth';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/super/'),
|
||||
@@ -7,6 +8,7 @@ const router = createRouter({
|
||||
{
|
||||
path: '/',
|
||||
component: AppLayout,
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
@@ -153,4 +155,34 @@ const router = createRouter({
|
||||
]
|
||||
});
|
||||
|
||||
let tokenValidated = false;
|
||||
let tokenValidationPromise = null;
|
||||
|
||||
router.beforeEach(async (to) => {
|
||||
if (to.meta?.requiresAuth !== true) return true;
|
||||
|
||||
const isAuthed = hasSuperAuthToken();
|
||||
if (!isAuthed) {
|
||||
return {
|
||||
name: 'login',
|
||||
query: { redirect: to.fullPath }
|
||||
};
|
||||
}
|
||||
|
||||
if (!tokenValidated) {
|
||||
tokenValidationPromise ??= refreshSuperToken();
|
||||
try {
|
||||
await tokenValidationPromise;
|
||||
tokenValidated = true;
|
||||
} catch {
|
||||
clearSuperAuthToken();
|
||||
tokenValidated = false;
|
||||
tokenValidationPromise = null;
|
||||
return { name: 'login', query: { redirect: to.fullPath } };
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
42
frontend/superadmin/src/service/auth.js
Normal file
42
frontend/superadmin/src/service/auth.js
Normal file
@@ -0,0 +1,42 @@
|
||||
import { requestJson } from './apiClient';
|
||||
|
||||
const SUPER_TOKEN_KEY = 'super_token';
|
||||
|
||||
export function getSuperAuthToken() {
|
||||
return localStorage.getItem(SUPER_TOKEN_KEY) || '';
|
||||
}
|
||||
|
||||
export function setSuperAuthToken(token) {
|
||||
const normalized = String(token || '').trim();
|
||||
if (!normalized) {
|
||||
localStorage.removeItem(SUPER_TOKEN_KEY);
|
||||
return;
|
||||
}
|
||||
localStorage.setItem(SUPER_TOKEN_KEY, normalized);
|
||||
}
|
||||
|
||||
export function clearSuperAuthToken() {
|
||||
localStorage.removeItem(SUPER_TOKEN_KEY);
|
||||
}
|
||||
|
||||
export function hasSuperAuthToken() {
|
||||
return Boolean(getSuperAuthToken());
|
||||
}
|
||||
|
||||
export async function superLogin({ username, password }) {
|
||||
const data = await requestJson('/super/v1/auth/login', {
|
||||
method: 'POST',
|
||||
body: { username, password }
|
||||
});
|
||||
const token = data?.token ?? '';
|
||||
setSuperAuthToken(token);
|
||||
return token;
|
||||
}
|
||||
|
||||
export async function refreshSuperToken() {
|
||||
const data = await requestJson('/super/v1/auth/token');
|
||||
const token = data?.token ?? '';
|
||||
if (token) setSuperAuthToken(token);
|
||||
return token;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,106 @@
|
||||
<script setup>
|
||||
import BestSellingWidget from '@/components/dashboard/BestSellingWidget.vue';
|
||||
import NotificationsWidget from '@/components/dashboard/NotificationsWidget.vue';
|
||||
import RecentSalesWidget from '@/components/dashboard/RecentSalesWidget.vue';
|
||||
import RevenueStreamWidget from '@/components/dashboard/RevenueStreamWidget.vue';
|
||||
import StatsWidget from '@/components/dashboard/StatsWidget.vue';
|
||||
import StatisticsStrip from '@/components/StatisticsStrip.vue';
|
||||
import { TenantService } from '@/service/TenantService';
|
||||
import { UserService } from '@/service/UserService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const tenantTotal = ref(null);
|
||||
const tenantLoading = ref(false);
|
||||
|
||||
const statistics = ref([]);
|
||||
const statisticsLoading = ref(false);
|
||||
|
||||
const statisticsItems = computed(() => {
|
||||
const total = (statistics.value || []).reduce((sum, row) => sum + (Number(row?.count) || 0), 0);
|
||||
const statusIcon = (status) => {
|
||||
switch (status) {
|
||||
case 'verified':
|
||||
return 'pi-check-circle';
|
||||
case 'pending_verify':
|
||||
return 'pi-clock';
|
||||
case 'banned':
|
||||
return 'pi-ban';
|
||||
default:
|
||||
return 'pi-tag';
|
||||
}
|
||||
};
|
||||
const valueClass = (status) => {
|
||||
switch (status) {
|
||||
case 'banned':
|
||||
return 'text-red-500';
|
||||
case 'pending_verify':
|
||||
return 'text-orange-500';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
return [
|
||||
{ key: 'users-total', label: '用户总数：', value: statisticsLoading.value ? '-' : total, icon: 'pi-users' },
|
||||
...(statistics.value || []).map((row) => ({
|
||||
key: row?.status ?? row?.status_description,
|
||||
label: `${row?.status_description || row?.status || '-'}：`,
|
||||
value: statisticsLoading.value ? '-' : (row?.count ?? 0),
|
||||
icon: statusIcon(row?.status),
|
||||
valueClass: valueClass(row?.status)
|
||||
}))
|
||||
];
|
||||
});
|
||||
|
||||
const tenantItems = computed(() => [
|
||||
{
|
||||
key: 'tenants-total',
|
||||
label: '租户总数：',
|
||||
value: tenantLoading.value ? '-' : (tenantTotal.value ?? '-'),
|
||||
icon: 'pi-building'
|
||||
}
|
||||
]);
|
||||
|
||||
async function loadTenantTotal() {
|
||||
tenantLoading.value = true;
|
||||
try {
|
||||
const result = await TenantService.listTenants({ page: 1, limit: 10 });
|
||||
tenantTotal.value = result?.total ?? 0;
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载租户信息', life: 4000 });
|
||||
} finally {
|
||||
tenantLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadStatistics() {
|
||||
statisticsLoading.value = true;
|
||||
try {
|
||||
statistics.value = await UserService.getUserStatistics();
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载用户统计信息', life: 4000 });
|
||||
} finally {
|
||||
statisticsLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadTenantTotal();
|
||||
loadStatistics();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-12 gap-8">
|
||||
<StatsWidget />
|
||||
<div>
|
||||
<StatisticsStrip :items="tenantItems" containerClass="card mb-4" />
|
||||
<StatisticsStrip :items="statisticsItems" containerClass="card mb-4" />
|
||||
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<RecentSalesWidget />
|
||||
<BestSellingWidget />
|
||||
</div>
|
||||
<div class="col-span-12 xl:col-span-6">
|
||||
<RevenueStreamWidget />
|
||||
<NotificationsWidget />
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="m-0">快捷入口</h4>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<Button label="租户管理" icon="pi pi-building" as="router-link" to="/superadmin/tenants" />
|
||||
<Button label="用户管理" icon="pi pi-users" as="router-link" to="/superadmin/users" severity="secondary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,49 @@
|
||||
<script setup>
|
||||
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
|
||||
import { ref } from 'vue';
|
||||
import { superLogin, hasSuperAuthToken } from '@/service/auth';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const email = ref('');
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const checked = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
const redirectPath = computed(() => {
|
||||
const raw = route.query?.redirect;
|
||||
return typeof raw === 'string' && raw.startsWith('/') ? raw : '/';
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
if (!username.value || !password.value) {
|
||||
toast.add({ severity: 'warn', summary: '请输入账号密码', life: 2500 });
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
await superLogin({ username: username.value, password: password.value });
|
||||
await router.replace(redirectPath.value);
|
||||
} catch (error) {
|
||||
toast.add({
|
||||
severity: 'error',
|
||||
summary: '登录失败',
|
||||
detail: error?.message || '无法登录',
|
||||
life: 4000
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (hasSuperAuthToken()) router.replace(redirectPath.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -35,21 +74,21 @@ const checked = ref(false);
|
||||
<span class="text-muted-color font-medium">Sign in to continue</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
|
||||
<InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" v-model="email" />
|
||||
<div @keyup.enter="onSubmit">
|
||||
<label for="username" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Username</label>
|
||||
<InputText id="username" type="text" placeholder="Username" class="w-full md:w-[30rem] mb-8" v-model="username" :disabled="loading" />
|
||||
|
||||
<label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
|
||||
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>
|
||||
<Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="mb-4" fluid :feedback="false" :disabled="loading"></Password>
|
||||
|
||||
<div class="flex items-center justify-between mt-2 mb-8 gap-8">
|
||||
<div class="flex items-center">
|
||||
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
|
||||
<Checkbox v-model="checked" id="rememberme1" binary class="mr-2" :disabled="loading"></Checkbox>
|
||||
<label for="rememberme1">Remember me</label>
|
||||
</div>
|
||||
<span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">Forgot password?</span>
|
||||
<span class="font-medium no-underline ml-2 text-right text-muted-color">Super Admin</span>
|
||||
</div>
|
||||
<Button label="Sign In" class="w-full" as="router-link" to="/"></Button>
|
||||
<Button label="Sign In" class="w-full" :loading="loading" :disabled="loading" @click="onSubmit"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user