feat: initialize game frontend with Vue, routing, and session management
- Add index.html as the entry point for the application. - Create App.vue to serve as the main application component with RouterView. - Implement global styles in main.css using Tailwind CSS. - Set up TypeScript definitions for Vue components in env.d.ts. - Configure Vue Router with routes for home, public, login, and not found views. - Extend RouteMeta interface to include authentication-related metadata. - Create a Pinia store for session management with status tracking. - Implement TRPC client for API communication with session token handling. - Develop views for Login, Main, Not Found, and Public with basic structure. - Configure TypeScript for Node with tsconfig.node.json. - Set up Vite configuration for the project with Vue and Tailwind CSS plugins.
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
|
||||
import MainView from '../views/MainView.vue';
|
||||
import PublicView from '../views/PublicView.vue';
|
||||
import LoginView from '../views/LoginView.vue';
|
||||
import NotFoundView from '../views/NotFoundView.vue';
|
||||
import { useSessionStore } from '../stores/session';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: MainView,
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
requiresGeneral: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/public',
|
||||
name: 'public',
|
||||
component: PublicView,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginView,
|
||||
meta: {
|
||||
publicOnly: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'not-found',
|
||||
component: NotFoundView,
|
||||
},
|
||||
] satisfies RouteRecordRaw[];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to) => {
|
||||
const session = useSessionStore();
|
||||
|
||||
if (!session.isReady) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (to.meta.publicOnly && session.isAuthed) {
|
||||
return { name: 'home' };
|
||||
}
|
||||
|
||||
if (to.meta.requiresAuth && !session.isAuthed) {
|
||||
return { name: 'public' };
|
||||
}
|
||||
|
||||
if (to.meta.requiresGeneral && !session.hasGeneral) {
|
||||
return { name: 'public' };
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
export default router;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
import 'vue-router';
|
||||
|
||||
declare module 'vue-router' {
|
||||
interface RouteMeta {
|
||||
requiresAuth?: boolean;
|
||||
requiresGeneral?: boolean;
|
||||
publicOnly?: boolean;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user