112 lines
3.6 KiB
TypeScript
112 lines
3.6 KiB
TypeScript
import { Route, Router, RouteSectionProps } from '@solidjs/router'
|
||
import { Component, Suspense, lazy } from 'solid-js'
|
||
import { isAuthenticated } from './auth'
|
||
|
||
// Ленивая загрузка компонентов
|
||
const LoginPage = lazy(() => import('./login'))
|
||
const AdminPage = lazy(() => import('./admin'))
|
||
|
||
/**
|
||
* Компонент корневого шаблона приложения
|
||
* @param props - Свойства маршрута, включающие дочерние элементы
|
||
*/
|
||
const RootLayout: Component<RouteSectionProps> = (props) => {
|
||
return (
|
||
<div class="app-container">
|
||
{/* Здесь может быть общий хедер, футер или другие элементы */}
|
||
{props.children}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Компонент защиты маршрутов
|
||
* Проверяет авторизацию и либо показывает дочерние элементы,
|
||
* либо перенаправляет на страницу входа
|
||
*/
|
||
const RequireAuth: Component<RouteSectionProps> = (props) => {
|
||
const authed = isAuthenticated()
|
||
|
||
if (!authed) {
|
||
// Если не авторизован, перенаправляем на /login
|
||
window.location.href = '/login'
|
||
return (
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Перенаправление на страницу входа...</h2>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return <>{props.children}</>
|
||
}
|
||
|
||
/**
|
||
* Компонент для публичных маршрутов с редиректом,
|
||
* если пользователь уже авторизован
|
||
*/
|
||
const PublicOnlyRoute: Component<RouteSectionProps> = (props) => {
|
||
// Если пользователь авторизован, перенаправляем на админ-панель
|
||
if (isAuthenticated()) {
|
||
window.location.href = '/admin'
|
||
return (
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Перенаправление в админ-панель...</h2>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return <>{props.children}</>
|
||
}
|
||
|
||
/**
|
||
* Компонент перенаправления с корневого маршрута
|
||
*/
|
||
const RootRedirect: Component = () => {
|
||
const authenticated = isAuthenticated()
|
||
|
||
// Выполняем перенаправление сразу после рендеринга
|
||
setTimeout(() => {
|
||
window.location.href = authenticated ? '/admin' : '/login'
|
||
}, 100)
|
||
|
||
return (
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Перенаправление...</h2>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
/**
|
||
* Корневой компонент приложения с настроенными маршрутами
|
||
*/
|
||
const App: Component = () => {
|
||
return (
|
||
<Router root={RootLayout}>
|
||
<Suspense fallback={
|
||
<div class="loading-screen">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Загрузка...</h2>
|
||
</div>
|
||
}>
|
||
{/* Корневой маршрут с перенаправлением */}
|
||
<Route path="/" component={RootRedirect} />
|
||
|
||
{/* Маршрут логина (только для неавторизованных) */}
|
||
<Route path="/login" component={PublicOnlyRoute}>
|
||
<Route path="/" component={LoginPage} />
|
||
</Route>
|
||
|
||
{/* Защищенные маршруты (только для авторизованных) */}
|
||
<Route path="/admin" component={RequireAuth}>
|
||
<Route path="/*" component={AdminPage} />
|
||
</Route>
|
||
</Suspense>
|
||
</Router>
|
||
)
|
||
}
|
||
|
||
export default App
|