mirror of https://github.com/veypi/OneAuth.git
fix: 修复路由和页面加载问题
veypi
1 week ago
parent
e5308f9471
commit
983a5651a3
@ -1,115 +1,123 @@
|
|||||||
<!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>
|
||||||
<style>
|
<style>
|
||||||
.dashboard-container {
|
.dashboard-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
.stats-grid {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
display: grid;
|
||||||
gap: 20px;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
}
|
gap: 20px;
|
||||||
.stat-card {
|
}
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
.stat-card {
|
||||||
border-radius: var(--radius-md);
|
background: #fff;
|
||||||
box-shadow: var(--shadow-sm);
|
padding: 20px;
|
||||||
display: flex;
|
border-radius: var(--radius-md);
|
||||||
flex-direction: column;
|
box-shadow: var(--shadow-sm);
|
||||||
gap: 10px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
.stat-title {
|
gap: 10px;
|
||||||
font-size: 14px;
|
}
|
||||||
color: var(--text-color-secondary);
|
|
||||||
}
|
.stat-title {
|
||||||
.stat-value {
|
font-size: 14px;
|
||||||
font-size: 24px;
|
color: var(--text-color-secondary);
|
||||||
font-weight: bold;
|
}
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
.stat-value {
|
||||||
.chart-container {
|
font-size: 24px;
|
||||||
background: #fff;
|
font-weight: bold;
|
||||||
padding: 20px;
|
color: var(--color-primary);
|
||||||
border-radius: var(--radius-md);
|
}
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
height: 400px;
|
.chart-container {
|
||||||
}
|
background: #fff;
|
||||||
</style>
|
padding: 20px;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<div class="dashboard-container">
|
|
||||||
<h1>{{ $t('nav.dashboard') }}</h1>
|
|
||||||
|
|
||||||
<div class="stats-grid">
|
<body>
|
||||||
<div class="stat-card" v-for="stat in stats">
|
<div class="dashboard-container">
|
||||||
<div class="stat-title">{{ stat.title }}</div>
|
<h1>{{ $t('nav.dashboard') }}</h1>
|
||||||
<div class="stat-value">{{ stat.value }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chart-container" id="main-chart"></div>
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card" v-for="stat in stats">
|
||||||
|
<div class="stat-title">{{ stat.title }}</div>
|
||||||
|
<div class="stat-value">{{ stat.value }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" id="main-chart"></div>
|
||||||
|
</div>
|
||||||
</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
|
||||||
fetchStats = async () => {
|
fetchStats = async () => {
|
||||||
// In real app, call API
|
// In real app, call API
|
||||||
// const res = await $axios.get('/api/stats/dashboard');
|
// const res = await $axios.get('/api/stats/dashboard');
|
||||||
// stats = res;
|
// stats = res;
|
||||||
};
|
};
|
||||||
|
|
||||||
initChart = () => {
|
|
||||||
const chartDom = $node.querySelector('#main-chart');
|
|
||||||
if (!chartDom) return;
|
|
||||||
|
|
||||||
const myChart = echarts.init(chartDom);
|
initChart = () => {
|
||||||
const option = {
|
const chartDom = $node.querySelector('#main-chart');
|
||||||
title: {
|
if (!chartDom) return;
|
||||||
text: 'Activity Trend'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis'
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
||||||
type: 'line',
|
|
||||||
smooth: true,
|
|
||||||
itemStyle: {
|
|
||||||
color: getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
myChart.setOption(option);
|
|
||||||
|
|
||||||
// Resize chart on window resize
|
const myChart = echarts.init(chartDom);
|
||||||
window.addEventListener('resize', () => {
|
const option = {
|
||||||
myChart.resize();
|
title: {
|
||||||
});
|
text: 'Activity Trend'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: getComputedStyle(document.documentElement).getPropertyValue('--color-primary').trim()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
// Resize chart on window resize
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// Run after mount
|
// Run after mount
|
||||||
$data.initChart();
|
$data.initChart();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,217 +1,220 @@
|
|||||||
|
|
||||||
class VBase {
|
class VBase {
|
||||||
constructor(baseURL) {
|
constructor(baseURL) {
|
||||||
this.baseURL = baseURL || '';
|
this.baseURL = baseURL || '';
|
||||||
this.tokenKey = 'vbase_access_token';
|
this.tokenKey = 'vbase_access_token';
|
||||||
this.refreshTokenKey = 'vbase_refresh_token';
|
this.refreshTokenKey = 'vbase_refresh_token';
|
||||||
this.userKey = 'vbase_user_info';
|
this.userKey = 'vbase_user_info';
|
||||||
this.orgKey = 'vbase_current_org';
|
this.orgKey = 'vbase_current_org';
|
||||||
|
|
||||||
this._token = localStorage.getItem(this.tokenKey) || '';
|
this._token = localStorage.getItem(this.tokenKey) || '';
|
||||||
this._refreshToken = localStorage.getItem(this.refreshTokenKey) || '';
|
this._refreshToken = localStorage.getItem(this.refreshTokenKey) || '';
|
||||||
this._user = JSON.parse(localStorage.getItem(this.userKey) || 'null');
|
this._user = JSON.parse(localStorage.getItem(this.userKey) || 'null');
|
||||||
this._currentOrg = JSON.parse(localStorage.getItem(this.orgKey) || 'null');
|
this._currentOrg = JSON.parse(localStorage.getItem(this.orgKey) || 'null');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Getters
|
// Getters
|
||||||
get token() { return this._token; }
|
get token() { return this._token; }
|
||||||
get refreshToken() { return this._refreshToken; }
|
get refreshToken() { return this._refreshToken; }
|
||||||
get user() { return this._user; }
|
get user() { return this._user; }
|
||||||
get currentOrg() { return this._currentOrg; }
|
get currentOrg() { return this._currentOrg; }
|
||||||
|
|
||||||
// Setters
|
// Setters
|
||||||
set token(val) {
|
set token(val) {
|
||||||
this._token = val;
|
this._token = val;
|
||||||
if (val) localStorage.setItem(this.tokenKey, val);
|
if (val) localStorage.setItem(this.tokenKey, val);
|
||||||
else localStorage.removeItem(this.tokenKey);
|
else localStorage.removeItem(this.tokenKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
set refreshToken(val) {
|
set refreshToken(val) {
|
||||||
this._refreshToken = val;
|
this._refreshToken = val;
|
||||||
if (val) localStorage.setItem(this.refreshTokenKey, val);
|
if (val) localStorage.setItem(this.refreshTokenKey, val);
|
||||||
else localStorage.removeItem(this.refreshTokenKey);
|
else localStorage.removeItem(this.refreshTokenKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
set user(val) {
|
set user(val) {
|
||||||
this._user = val;
|
this._user = val;
|
||||||
if (val) localStorage.setItem(this.userKey, JSON.stringify(val));
|
if (val) localStorage.setItem(this.userKey, JSON.stringify(val));
|
||||||
else localStorage.removeItem(this.userKey);
|
else localStorage.removeItem(this.userKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
set currentOrg(val) {
|
set currentOrg(val) {
|
||||||
this._currentOrg = val;
|
this._currentOrg = val;
|
||||||
if (val) localStorage.setItem(this.orgKey, JSON.stringify(val));
|
if (val) localStorage.setItem(this.orgKey, JSON.stringify(val));
|
||||||
else localStorage.removeItem(this.orgKey);
|
else localStorage.removeItem(this.orgKey);
|
||||||
}
|
}
|
||||||
|
|
||||||
// API Helpers
|
// API Helpers
|
||||||
async request(method, path, data = null, headers = {}) {
|
async request(method, path, data = null, headers = {}) {
|
||||||
const url = `${this.baseURL}${path}`;
|
const url = `${this.baseURL}${path}`;
|
||||||
const config = {
|
const config = {
|
||||||
method,
|
method,
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
...this.getAuthHeaders(),
|
...this.getAuthHeaders(),
|
||||||
...headers
|
...headers
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (data) config.body = JSON.stringify(data);
|
if (data) config.body = JSON.stringify(data);
|
||||||
|
|
||||||
const response = await fetch(url, config);
|
const response = await fetch(url, config);
|
||||||
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);
|
||||||
if (resData.code && resData.code !== 200) {
|
throw error;
|
||||||
throw new Error(resData.message || 'API Error');
|
}
|
||||||
}
|
|
||||||
|
if (resData.code && resData.code !== 200) {
|
||||||
return resData.data || resData;
|
throw new Error(resData.message || 'API Error');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Auth Actions
|
return resData.data || resData;
|
||||||
async login(username, password) {
|
}
|
||||||
try {
|
|
||||||
const data = await this.request('POST', '/api/auth/login', { username, password });
|
// Auth Actions
|
||||||
if (data.access) {
|
async login(username, password) {
|
||||||
this.token = data.access;
|
try {
|
||||||
if (data.refresh) this.refreshToken = data.refresh;
|
const data = await this.request('POST', '/api/auth/login', { username, password });
|
||||||
await this.fetchUser();
|
if (data.access_token) {
|
||||||
return true;
|
this.token = data.access_token;
|
||||||
}
|
if (data.refresh_token) this.refreshToken = data.refresh_token;
|
||||||
return false;
|
this.user = data.user; // Set user directly from login response
|
||||||
} catch (e) {
|
return true;
|
||||||
throw e;
|
}
|
||||||
}
|
return false;
|
||||||
}
|
} catch (e) {
|
||||||
|
throw e;
|
||||||
async logout(redirect) {
|
}
|
||||||
try {
|
}
|
||||||
// Optional: Call server logout
|
|
||||||
// await this.request('POST', '/api/auth/logout');
|
async logout(redirect) {
|
||||||
} catch (e) {
|
try {
|
||||||
console.warn('Logout API failed', e);
|
// Optional: Call server logout
|
||||||
} finally {
|
// await this.request('POST', '/api/auth/logout');
|
||||||
this.clear();
|
} catch (e) {
|
||||||
if (redirect) {
|
console.warn('Logout API failed', e);
|
||||||
location.href = redirect;
|
} finally {
|
||||||
} else {
|
this.clear();
|
||||||
location.reload();
|
if (redirect) {
|
||||||
}
|
location.href = redirect;
|
||||||
}
|
} else {
|
||||||
}
|
location.reload();
|
||||||
|
}
|
||||||
async refresh() {
|
}
|
||||||
if (!this.refreshToken) throw new Error("No refresh token");
|
}
|
||||||
|
|
||||||
|
async refresh() {
|
||||||
|
if (!this.refreshToken) throw new Error("No refresh token");
|
||||||
|
try {
|
||||||
|
const data = await this.request('POST', '/api/auth/refresh', { refresh_token: this.refreshToken });
|
||||||
|
if (data.access_token) {
|
||||||
|
this.token = data.access_token;
|
||||||
|
if (data.refresh_token) this.refreshToken = data.refresh_token;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
} catch (e) {
|
||||||
|
this.logout();
|
||||||
|
throw e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async fetchUser() {
|
||||||
|
const user = await this.request('GET', '/api/auth/me');
|
||||||
|
this.user = user;
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auth Headers
|
||||||
|
getAuthHeaders() {
|
||||||
|
const headers = {};
|
||||||
|
if (this.token) {
|
||||||
|
headers['Authorization'] = `Bearer ${this.token}`;
|
||||||
|
}
|
||||||
|
if (this.currentOrg && this.currentOrg.id) {
|
||||||
|
headers['X-Org-ID'] = this.currentOrg.id;
|
||||||
|
}
|
||||||
|
return headers;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Permission Check
|
||||||
|
hasPermission(permission) {
|
||||||
|
if (!this.user) return false;
|
||||||
|
if (this.user.is_admin) return true;
|
||||||
|
if (!permission) return true;
|
||||||
|
const userPerms = this.user.permissions || [];
|
||||||
|
return userPerms.includes(permission);
|
||||||
|
}
|
||||||
|
|
||||||
|
hasRole(role) {
|
||||||
|
if (!this.user) return false;
|
||||||
|
if (this.user.is_admin) return true;
|
||||||
|
const userRoles = this.user.roles || [];
|
||||||
|
return userRoles.includes(role);
|
||||||
|
}
|
||||||
|
|
||||||
|
// State Management
|
||||||
|
clear() {
|
||||||
|
this.token = '';
|
||||||
|
this.refreshToken = '';
|
||||||
|
this.user = null;
|
||||||
|
this.currentOrg = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
isExpired(token) {
|
||||||
|
if (!token) token = this.token;
|
||||||
|
if (!token) return true;
|
||||||
|
try {
|
||||||
|
const base64Url = token.split('.')[1];
|
||||||
|
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
||||||
|
const payload = JSON.parse(window.atob(base64));
|
||||||
|
const now = Math.floor(Date.now() / 1000);
|
||||||
|
return payload.exp && payload.exp < now;
|
||||||
|
} catch (e) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
wrapAxios(axiosInstance) {
|
||||||
|
// Request Interceptor
|
||||||
|
axiosInstance.interceptors.request.use(config => {
|
||||||
|
const headers = this.getAuthHeaders();
|
||||||
|
for (const key in headers) {
|
||||||
|
config.headers[key] = headers[key];
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
}, error => Promise.reject(error));
|
||||||
|
|
||||||
|
// Response Interceptor
|
||||||
|
axiosInstance.interceptors.response.use(response => {
|
||||||
|
const res = response.data;
|
||||||
|
if (res && res.code === 200) {
|
||||||
|
return res.data;
|
||||||
|
}
|
||||||
|
if (res && res.code && res.code !== 200) {
|
||||||
|
return Promise.reject(new Error(res.message || 'Error'));
|
||||||
|
}
|
||||||
|
return res || response;
|
||||||
|
}, async error => {
|
||||||
|
const originalRequest = error.config;
|
||||||
|
if (error.response?.status === 401 && !originalRequest._retry) {
|
||||||
|
originalRequest._retry = true;
|
||||||
try {
|
try {
|
||||||
const data = await this.request('POST', '/api/auth/refresh', { refresh: this.refreshToken });
|
await this.refresh();
|
||||||
if (data.access) {
|
const headers = this.getAuthHeaders();
|
||||||
this.token = data.access;
|
originalRequest.headers['Authorization'] = headers['Authorization'];
|
||||||
if (data.refresh) this.refreshToken = data.refresh;
|
return axiosInstance(originalRequest);
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.logout();
|
this.logout('/login?redirect=' + encodeURIComponent(window.location.pathname));
|
||||||
throw e;
|
return Promise.reject(e);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchUser() {
|
|
||||||
const user = await this.request('GET', '/api/auth/me');
|
|
||||||
this.user = user;
|
|
||||||
return user;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Auth Headers
|
|
||||||
getAuthHeaders() {
|
|
||||||
const headers = {};
|
|
||||||
if (this.token) {
|
|
||||||
headers['Authorization'] = `Bearer ${this.token}`;
|
|
||||||
}
|
|
||||||
if (this.currentOrg && this.currentOrg.id) {
|
|
||||||
headers['X-Org-ID'] = this.currentOrg.id;
|
|
||||||
}
|
}
|
||||||
return headers;
|
}
|
||||||
}
|
return Promise.reject(error?.response?.data || error);
|
||||||
|
});
|
||||||
// Permission Check
|
}
|
||||||
hasPermission(permission) {
|
|
||||||
if (!this.user) return false;
|
|
||||||
if (this.user.is_admin) return true;
|
|
||||||
if (!permission) return true;
|
|
||||||
const userPerms = this.user.permissions || [];
|
|
||||||
return userPerms.includes(permission);
|
|
||||||
}
|
|
||||||
|
|
||||||
hasRole(role) {
|
|
||||||
if (!this.user) return false;
|
|
||||||
if (this.user.is_admin) return true;
|
|
||||||
const userRoles = this.user.roles || [];
|
|
||||||
return userRoles.includes(role);
|
|
||||||
}
|
|
||||||
|
|
||||||
// State Management
|
|
||||||
clear() {
|
|
||||||
this.token = '';
|
|
||||||
this.refreshToken = '';
|
|
||||||
this.user = null;
|
|
||||||
this.currentOrg = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
isExpired(token) {
|
|
||||||
if (!token) token = this.token;
|
|
||||||
if (!token) return true;
|
|
||||||
try {
|
|
||||||
const base64Url = token.split('.')[1];
|
|
||||||
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
|
|
||||||
const payload = JSON.parse(window.atob(base64));
|
|
||||||
const now = Math.floor(Date.now() / 1000);
|
|
||||||
return payload.exp && payload.exp < now;
|
|
||||||
} catch (e) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
wrapAxios(axiosInstance) {
|
|
||||||
// Request Interceptor
|
|
||||||
axiosInstance.interceptors.request.use(config => {
|
|
||||||
const headers = this.getAuthHeaders();
|
|
||||||
for (const key in headers) {
|
|
||||||
config.headers[key] = headers[key];
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
}, error => Promise.reject(error));
|
|
||||||
|
|
||||||
// Response Interceptor
|
|
||||||
axiosInstance.interceptors.response.use(response => {
|
|
||||||
const res = response.data;
|
|
||||||
if (res && res.code === 200) {
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
if (res && res.code && res.code !== 200) {
|
|
||||||
return Promise.reject(new Error(res.message || 'Error'));
|
|
||||||
}
|
|
||||||
return res || response;
|
|
||||||
}, async error => {
|
|
||||||
const originalRequest = error.config;
|
|
||||||
if (error.response?.status === 401 && !originalRequest._retry) {
|
|
||||||
originalRequest._retry = true;
|
|
||||||
try {
|
|
||||||
await this.refresh();
|
|
||||||
const headers = this.getAuthHeaders();
|
|
||||||
originalRequest.headers['Authorization'] = headers['Authorization'];
|
|
||||||
return axiosInstance(originalRequest);
|
|
||||||
} catch (e) {
|
|
||||||
this.logout(window.location.pathname);
|
|
||||||
return Promise.reject(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return Promise.reject(error?.response?.data || error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VBase;
|
export default VBase;
|
||||||
|
|||||||
Loading…
Reference in New Issue