imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move auth-entry checks to router guard and simplify MainContainer route logic

Browse Source 
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
依瑪貓
2026-03-08 19:14:20 +08:00
parent f3d11ebbcb
commit 955e9ceda9
3 changed files with 48 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/MainContainer.vue
View File

@@ -27,11 +27,9 @@
* via beforeRouteUpdate. * via beforeRouteUpdate.
*/ */
import { useLoginStore as useLoginStoreInGuard } from "@/stores/login";
import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin"; import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin";
import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData"; import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData";
import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance"; import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
import { getCookie, setCookie } from "@/utils/cookieUtil.js";
import { import {
leaveFilter as leaveFilterInGuard, leaveFilter as leaveFilterInGuard,
leaveConformance as leaveConformanceInGuard, leaveConformance as leaveConformanceInGuard,
@@ -39,55 +37,6 @@ import {
import emitterInGuard from "@/utils/emitter"; import emitterInGuard from "@/utils/emitter";
export default { export default {
// When the page is refreshed or entered for the first time, beforeRouteEnter is executed, but beforeRouteUpdate is not
// PSEUDOCODE
// if (not logged in) {
// if (has refresh token) {
// refresh_token();
// if (refresh failed) {
// go to log in();
// } else {
// cookie add("refresh_token=" + refresh_token "; expire=****")
// }
// } else {
// go to log in();
// }
// }
async beforeRouteEnter(to, from, next) {
const loginStore = useLoginStoreInGuard();
const relativeReturnTo = `${window.location.pathname}${window.location.search}${window.location.hash}`;
const hasLoginMarker = Boolean(getCookie("isLuciaLoggedIn"));
const hasAccessToken = Boolean(getCookie("luciaToken"));
const hasRefreshToken = Boolean(getCookie("luciaRefreshToken"));
if (hasLoginMarker && hasAccessToken) {
next();
return;
}
if (hasRefreshToken) {
try {
await loginStore.refreshToken();
loginStore.setIsLoggedIn(true);
setCookie("isLuciaLoggedIn", "true");
next();
} catch (error) {
next({
path: "/login",
query: {
"return-to": btoa(relativeReturnTo),
},
});
}
} else {
next({
path: "/login",
query: {
"return-to": btoa(relativeReturnTo),
},
});
}
},
// Remember, Swal modal handling is called before beforeRouteUpdate // Remember, Swal modal handling is called before beforeRouteUpdate
beforeRouteUpdate(to, from, next) { beforeRouteUpdate(to, from, next) {
const pageAdminStore = usePageAdminStoreInGuard(); const pageAdminStore = usePageAdminStoreInGuard();
@@ -127,31 +76,17 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { onBeforeMount } from "vue"; import { onBeforeMount } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useLoadingStore } from "@/stores/loading"; import { useLoadingStore } from "@/stores/loading";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useConformanceStore } from "@/stores/conformance";
import Header from "@/components/AppHeader.vue"; import Header from "@/components/AppHeader.vue";
import Navbar from "@/components/AppNavbar.vue"; import Navbar from "@/components/AppNavbar.vue";
import Loading from "@/components/LoadingOverlay.vue"; import Loading from "@/components/LoadingOverlay.vue";
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
import { usePageAdminStore } from "@/stores/pageAdmin"; import { usePageAdminStore } from "@/stores/pageAdmin";
import { useLoginStore } from "@/stores/login";
import emitter from "@/utils/emitter";
import ModalContainer from "./AccountManagement/ModalContainer.vue"; import ModalContainer from "./AccountManagement/ModalContainer.vue";
const loadingStore = useLoadingStore(); const loadingStore = useLoadingStore();
const allMapDataStore = useAllMapDataStore();
const conformanceStore = useConformanceStore();
const pageAdminStore = usePageAdminStore(); const pageAdminStore = usePageAdminStore();
const loginStore = useLoginStore();
const router = useRouter(); const router = useRouter();
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } =
storeToRefs(allMapDataStore);
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
storeToRefs(conformanceStore);
/** Sets the highlighted navbar item based on the current URL path on page load. */ /** Sets the highlighted navbar item based on the current URL path on page load. */
const setHighlightedNavItemOnLanding = () => { const setHighlightedNavItemOnLanding = () => {
const currentPath = router.currentRoute.value.path; const currentPath = router.currentRoute.value.path;

55
tests/router/routerGuard.test.js
View File

@@ -17,13 +17,17 @@ describe("router beforeEach guard logic", () => {
}); });
// Simulate the guard logic from router/index.ts // Simulate the guard logic from router/index.ts
function runGuard(to) { async function runGuard(to, options = {}) {
const { refreshSucceeds = true } = options;
const hasLoginMarker = document.cookie const hasLoginMarker = document.cookie
.split(";") .split(";")
.some((c) => c.trim().startsWith("isLuciaLoggedIn=")); .some((c) => c.trim().startsWith("isLuciaLoggedIn="));
const hasAccessToken = document.cookie const hasAccessToken = document.cookie
.split(";") .split(";")
.some((c) => c.trim().startsWith("luciaToken=")); .some((c) => c.trim().startsWith("luciaToken="));
const hasRefreshToken = document.cookie
.split(";")
.some((c) => c.trim().startsWith("luciaRefreshToken="));
const isAuthenticated = hasLoginMarker && hasAccessToken; const isAuthenticated = hasLoginMarker && hasAccessToken;
if (to.name === "Login") { if (to.name === "Login") {
@@ -32,6 +36,9 @@ describe("router beforeEach guard logic", () => {
const requiresAuth = (to.matched || []).some((r) => r.meta?.requiresAuth); const requiresAuth = (to.matched || []).some((r) => r.meta?.requiresAuth);
if (requiresAuth && !isAuthenticated) { if (requiresAuth && !isAuthenticated) {
if (hasRefreshToken) {
if (refreshSucceeds) return undefined;
}
return { return {
path: "/login", path: "/login",
query: { query: {
@@ -46,15 +53,17 @@ describe("router beforeEach guard logic", () => {
it("redirects logged-in user from Login to Files", () => { it("redirects logged-in user from Login to Files", () => {
document.cookie = "isLuciaLoggedIn=true"; document.cookie = "isLuciaLoggedIn=true";
document.cookie = "luciaToken=token"; document.cookie = "luciaToken=token";
expect(runGuard({ name: "Login" })).toEqual({ name: "Files" }); return expect(runGuard({ name: "Login" })).resolves.toEqual({
name: "Files",
});
}); });
it("allows unauthenticated user to visit Login", () => { it("allows unauthenticated user to visit Login", () => {
expect(runGuard({ name: "Login" })).toBeUndefined(); return expect(runGuard({ name: "Login" })).resolves.toBeUndefined();
}); });
it("redirects unauthenticated user when route requiresAuth", () => { it("redirects unauthenticated user when route requiresAuth", async () => {
const result = runGuard({ const result = await runGuard({
name: "Files", name: "Files",
path: "/files", path: "/files",
fullPath: "/files", fullPath: "/files",
@@ -64,16 +73,48 @@ describe("router beforeEach guard logic", () => {
expect(atob(result.query["return-to"])).toBe("/files"); expect(atob(result.query["return-to"])).toBe("/files");
}); });
it("allows requiresAuth route when refresh token can refresh session", () => {
document.cookie = "luciaRefreshToken=refresh-token";
return expect(
runGuard(
{
name: "Files",
path: "/files",
fullPath: "/files",
matched: [{ meta: { requiresAuth: true } }],
},
{ refreshSucceeds: true },
),
).resolves.toBeUndefined();
});
it("redirects to login with return-to when refresh fails", async () => {
document.cookie = "luciaRefreshToken=refresh-token";
const result = await runGuard(
{
name: "Map",
path: "/discover/log/1/map",
fullPath: "/discover/log/1/map?view=summary#node-2",
matched: [{ meta: { requiresAuth: true } }],
},
{ refreshSucceeds: false },
);
expect(result.path).toBe("/login");
expect(atob(result.query["return-to"])).toBe(
"/discover/log/1/map?view=summary#node-2",
);
});
it("does not interfere with non-Login routes", () => { it("does not interfere with non-Login routes", () => {
document.cookie = "isLuciaLoggedIn=true"; document.cookie = "isLuciaLoggedIn=true";
document.cookie = "luciaToken=token"; document.cookie = "luciaToken=token";
expect( return expect(
runGuard({ runGuard({
name: "Files", name: "Files",
path: "/files", path: "/files",
fullPath: "/files", fullPath: "/files",
matched: [{ meta: { requiresAuth: true } }], matched: [{ meta: { requiresAuth: true } }],
}), }),
).toBeUndefined(); ).resolves.toBeUndefined();
}); });
}); });

120
tests/views/MainContainerGuard.test.js
View File

@@ -1,120 +0,0 @@
// The Lucia project.
// Copyright 2026-2026 DSP, inc. All rights reserved.
// Authors:
// imacat.yang@dsp.im (imacat), 2026/03/06
import { describe, it, expect, beforeEach, vi } from "vitest";
import { setActivePinia, createPinia } from "pinia";
// Mock all heavy imports that MainContainer.vue pulls in
vi.mock("@/stores/loading", () => ({
useLoadingStore: () => ({ isLoading: false }),
}));
vi.mock("@/stores/allMapData", () => ({
useAllMapDataStore: () => ({}),
}));
vi.mock("@/stores/conformance", () => ({
useConformanceStore: () => ({}),
}));
vi.mock("@/stores/pageAdmin", () => ({
usePageAdminStore: () => ({}),
}));
vi.mock("@/module/alertModal.js", () => ({
leaveFilter: vi.fn(),
leaveConformance: vi.fn(),
}));
vi.mock("@/module/apiError.js", () => ({
default: vi.fn(),
}));
vi.mock("@/router/index.ts", () => ({
default: { push: vi.fn(), currentRoute: { value: { path: "/" } } },
}));
vi.mock("@/module/cytoscapeMap.js", () => ({}));
import { useLoginStore } from "@/stores/login";
import * as cookieUtil from "@/utils/cookieUtil.js";
// Import the component definition to access beforeRouteEnter
import MainContainer from "@/views/MainContainer.vue";
describe("MainContainer beforeRouteEnter", () => {
let loginStore;
let next;
beforeEach(() => {
setActivePinia(createPinia());
loginStore = useLoginStore();
loginStore.$router = { push: vi.fn() };
next = vi.fn();
vi.clearAllMocks();
// Clear cookies
document.cookie.split(";").forEach((c) => {
const name = c.split("=")[0].trim();
if (name) {
document.cookie = name + "=; Max-Age=-99999999; path=/";
}
});
});
const callGuard = () => {
const guard = MainContainer.beforeRouteEnter;
return guard({}, {}, next);
};
it("calls next() after successful refreshToken", async () => {
// Not logged in, but has refresh token
document.cookie = "luciaRefreshToken=some-token";
vi.spyOn(loginStore, "refreshToken").mockResolvedValue();
await callGuard();
expect(loginStore.refreshToken).toHaveBeenCalled();
expect(next).toHaveBeenCalled();
});
it("redirects to login when refreshToken fails", async () => {
// Not logged in, has refresh token, but refresh fails
document.cookie = "luciaRefreshToken=some-token";
vi.spyOn(loginStore, "refreshToken").mockRejectedValue(new Error("401"));
await callGuard();
expect(next).toHaveBeenCalledWith(
expect.objectContaining({ path: "/login" }),
);
});
it("calls next() when logged-in marker and access token both exist", async () => {
document.cookie = "isLuciaLoggedIn=true";
document.cookie = "luciaToken=token";
await callGuard();
expect(next).toHaveBeenCalled();
});
it("redirects to login when logged-in marker exists without access token", async () => {
document.cookie = "isLuciaLoggedIn=true";
await callGuard();
expect(next).toHaveBeenCalledWith(
expect.objectContaining({ path: "/login" }),
);
});
it("stores a relative return-to path when redirecting to login", async () => {
window.history.replaceState(
{},
"",
"/discover/log/1/map?view=summary#node-2",
);
await callGuard();
const redirectArg = next.mock.calls[0][0];
const returnTo = redirectArg.query["return-to"];
expect(atob(returnTo)).toBe("/discover/log/1/map?view=summary#node-2");
});
});