diff --git a/ts/AppSync.vue b/ts/AppSync.vue index 8f02cbbb..6d0dee43 100644 --- a/ts/AppSync.vue +++ b/ts/AppSync.vue @@ -13,12 +13,11 @@ onMounted(() => { session .get() .then((session: Session) => { - console.log("session loaded", session); + console.log("session loaded by AppSync", session); }) .catch((e) => { console.log("root session not loaded", e); router.push("/signin"); }); - console.log("home mounted"); }); diff --git a/ts/client.ts b/ts/client.ts index 6b82caac..5e6a11f9 100644 --- a/ts/client.ts +++ b/ts/client.ts @@ -4,6 +4,7 @@ import router from "@/router"; class ApiClient { private client: AxiosInstance; + private _hasSession: boolean = false; private _isAuthenticated: boolean = false; constructor() { @@ -40,14 +41,6 @@ class ApiClient { ); } - get isAuthenticated(): boolean { - return this._isAuthenticated; - } - - setAuthenticated(value: boolean): void { - this._isAuthenticated = value; - } - async JSONGet(url: string, config?: AxiosRequestConfig): Promise { const response = await this.client.get(url, { ...config, diff --git a/ts/components/layout/MainContent.vue b/ts/components/layout/MainContent.vue index d4506d71..44c284da 100644 --- a/ts/components/layout/MainContent.vue +++ b/ts/components/layout/MainContent.vue @@ -1,15 +1,9 @@ - + diff --git a/ts/router.ts b/ts/router.ts index 930fcb65..6933f818 100644 --- a/ts/router.ts +++ b/ts/router.ts @@ -1,5 +1,7 @@ import { createRouter, createWebHistory } from "vue-router"; import type { RouteRecordRaw } from "vue-router"; + +import { useSessionStore } from "@/store/session"; import Home from "@/view/Home.vue"; import Authenticated from "@/view/Authenticated.vue"; import Communication from "@/view/Communication.vue"; @@ -43,53 +45,44 @@ const routes: RouteRecordRaw[] = [ path: "/_/communication", name: "Communication", component: Communication, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration", name: "Configuration", component: ConfigurationRoot, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/integration", name: "Integration Configuration", component: ConfigurationIntegration, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/integration/arcgis", name: "Arcgis Integration Configuration", component: ConfigurationIntegrationArcgis, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/organization", name: "Organization Configuration", component: ConfigurationOrganization, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/pesticide", name: "Pesticide Configuration", component: ConfigurationPesticide, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/pesticide/add", name: "Pesticide Add", component: ConfigurationPesticideAdd, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/upload", name: "Upload Configuration", component: ConfigurationUpload, - meta: { requiresAuth: true, showSidebar: true }, }, { component: ConfigurationUploadDetail, - meta: { requiresAuth: true, showSidebar: true }, name: "Upload Detail", path: "/_/configuration/upload/:id", props: (route) => ({ @@ -100,35 +93,29 @@ const routes: RouteRecordRaw[] = [ path: "/_/configuration/upload/pool", name: "Pool Upload", component: ConfigurationUploadPool, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/upload/pool/custom", name: "Custom Pool Upload", component: ConfigurationUploadPoolCustom, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/upload/pool/flyover", name: "Flyover Upload", component: ConfigurationUploadPoolFlyover, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/user", name: "User Configuration", component: ConfigurationUser, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/configuration/user/add", name: "User Add Configuration", component: ConfigurationUserAdd, - meta: { requiresAuth: true, showSidebar: true }, }, { component: ConfigurationUserEdit, - meta: { requiresAuth: true, showSidebar: true }, name: "User Edit", path: "/_/configuration/user/:id", props: (route) => ({ @@ -144,49 +131,41 @@ const routes: RouteRecordRaw[] = [ path: "/_/intelligence", name: "Intelligence", component: Intelligence, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/oauth/refresh/arcgis", name: "Arcgis OAuth Refresh", component: OAuthRefreshArcgis, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/operations", name: "Operations", component: Operations, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/planning", name: "Planning", component: Planning, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/review", name: "Review", component: ReviewRoot, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/review/pool", name: "Pool Review", component: ReviewPool, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/review/site", name: "Site Review", component: ReviewSite, - meta: { requiresAuth: true, showSidebar: true }, }, { path: "/_/sudo", name: "Sudo", component: Sudo, - meta: { requiresAuth: true, showSidebar: true }, }, ], component: Authenticated, @@ -218,21 +197,19 @@ export const router = createRouter({ // Global navigation guard router.beforeEach(async (to, from) => { - const requiresAuth = to.matched.some((record) => record.meta.requiresAuth); - - if (requiresAuth) { - try { - // Check if user is authenticated (could be an API call) - if (!apiClient.isAuthenticated) { - return "/signin"; - } else { - return; - } - } catch (error) { - console.log("check auth failed"); - return "/signin"; - } + if (to.fullPath == "/signin") { + return; } + const storeSession = useSessionStore(); + try { + if (!storeSession.isLoading && !storeSession.isAuthenticated) { + console.log("sending to signin because we're not authenticated"); + return `/signin?next=${from.fullPath}`; + } + } catch (error) { + console.log("check auth failed"); + } + return; }); export default router; diff --git a/ts/store/session.ts b/ts/store/session.ts index 811856d9..5be4bba9 100644 --- a/ts/store/session.ts +++ b/ts/store/session.ts @@ -12,9 +12,11 @@ import { apiClient } from "@/client"; export const useSessionStore = defineStore("session", () => { // State + const hasSession = ref(false); + const isAuthenticated = ref(false); + const isLoading = ref(true); const impersonating = ref(null); const error = ref(null); - const loading = ref(true); const current = ref(null); const notification_counts = ref(null); const ongoingFetch = ref | null>(null); @@ -31,12 +33,11 @@ export const useSessionStore = defineStore("session", () => { // Actions async function fetchSession(): Promise { - loading.value = true; error.value = null; try { const data: Session = await apiClient.JSONGet("/api/session"); - apiClient.setAuthenticated(true); + isAuthenticated.value = true; impersonating.value = data.impersonating || null; notification_counts.value = data.notification_counts; organization.value = data.organization; @@ -44,19 +45,19 @@ export const useSessionStore = defineStore("session", () => { urls.value = data.urls; return data; } catch (e) { - apiClient.setAuthenticated(false); error.value = e instanceof Error ? e.message : "an error ocurred"; console.error("Error fetching user:", e); throw new Error(error.value); } finally { - loading.value = false; + hasSession.value = true; + isLoading.value = false; console.log("no longer loading session"); } } - async function isAuthenticated(): Promise { - console.log("pretend check user auth"); - return true; + async function getAuthenticated(): Promise { + await get(); + return isAuthenticated.value; } async function get(): Promise { @@ -74,13 +75,17 @@ export const useSessionStore = defineStore("session", () => { return s; } async function signout(): Promise { + isAuthenticated.value = false; apiClient.JSONPost("/api/signout", {}); } return { // State error, + getAuthenticated, + hasSession, impersonating, - loading, + isAuthenticated, + isLoading, notification_counts, organization, self, @@ -88,7 +93,6 @@ export const useSessionStore = defineStore("session", () => { // Actions fetchSession, get, - isAuthenticated, signout, }; }); diff --git a/ts/view/Authenticated.vue b/ts/view/Authenticated.vue index 7345f811..774fc273 100644 --- a/ts/view/Authenticated.vue +++ b/ts/view/Authenticated.vue @@ -6,7 +6,7 @@