yosaphatprs/hospital-log
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add route navigation guard

Browse Source
This commit is contained in:
yosaphatprs 2025-10-28 14:53:33 +07:00
parent 16f72d1dc5
commit a3d24a3715
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/hospital-log/src/routes/index.ts
View File

@ -5,8 +5,18 @@ import Login from "../views/auth/Login.vue";
import NotFoundView from "../views/NotFoundView.vue"; import NotFoundView from "../views/NotFoundView.vue";
const routes = [ const routes = [
{ path: "/", name: "login", component: Login }, {
{ path: "/dashboard", name: "dashboard", component: DashboardView }, path: "/",
name: "login",
component: Login,
meta: { requiresGuest: true },
},
{
path: "/dashboard",
name: "dashboard",
component: DashboardView,
meta: { requiresAuth: true },
},
{ {
path: "/:catchAll(.*)*", // This regex matches any path path: "/:catchAll(.*)*", // This regex matches any path
name: "NotFound", name: "NotFound",
@ -14,7 +24,21 @@ const routes = [
}, },
]; ];
export const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes, routes,
}); });
router.beforeEach((to, _from, next) => {
const token = localStorage.getItem("csrf_token");
if (to.meta.requiresAuth && !token) {
next({ name: "login" });
} else if (to.meta.requiresGuest && token) {
next({ name: "dashboard" });
} else {
next();
}
});
export { router };

6
frontend/hospital-log/src/views/auth/Login.vue
View File

@ -28,6 +28,10 @@ const { handleSubmit } = useForm({
const { value: username, errorMessage: usernameError } = useField("username"); const { value: username, errorMessage: usernameError } = useField("username");
const { value: password, errorMessage: passwordError } = useField("password"); const { value: password, errorMessage: passwordError } = useField("password");
const saveToken = async (token: string) => {
localStorage.setItem("csrf_token", token);
};
const onSubmit = handleSubmit(async (values: any) => { const onSubmit = handleSubmit(async (values: any) => {
isLoading.value = true; isLoading.value = true;
try { try {
@ -44,6 +48,7 @@ const onSubmit = handleSubmit(async (values: any) => {
} }
loginError.value = ""; loginError.value = "";
console.log("Success:", data); console.log("Success:", data);
await saveToken(data.csrfToken);
router.push({ name: "dashboard" }); router.push({ name: "dashboard" });
} catch (error: any) { } catch (error: any) {
if (error && Array.isArray(error.message)) { if (error && Array.isArray(error.message)) {
@ -55,6 +60,7 @@ const onSubmit = handleSubmit(async (values: any) => {
isLoading.value = false; isLoading.value = false;
} }
}); });
const baseButtonClass = const baseButtonClass =
"bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full"; "bg-primary hover:bg-primary-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full";