Fix error in logout procedure and guard for each route (#439)

web/src/hooks.ts

@@ -1,6 +1,6 @@
 import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit';
 import * as cookie from 'cookie';
-import { api, serverApi } from '@api';
+import { serverApi } from '@api';
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const cookies = cookie.parse(event.request.headers.get('cookie') || '');

web/src/routes/admin/index.svelte

@@ -2,7 +2,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { api, UserResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, allUsers] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -37,6 +44,7 @@
 	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
 	import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
 	import StatusBox from '$lib/components/shared-components/status-box.svelte';
+	import { browser } from '$app/env';
 
 	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;
 

web/src/routes/albums/[albumId]/index.svelte

@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch, params }) => {
+	export const load: Load = async ({ fetch, params, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const albumId = params['albumId'];
 
@@ -36,6 +43,7 @@
 
 <script lang="ts">
 	import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
+	import { browser } from '$app/env';
 
 	export let album: AlbumResponseDto;
 </script>

web/src/routes/albums/[albumId]/photos/[assetId].svelte

@@ -1,11 +1,10 @@
 <script context="module" lang="ts">
 	export const prerender = false;
+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async ({ params }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-		} catch (e) {
+	export const load: Load = async ({ params, session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'

web/src/routes/albums/index.svelte

@@ -9,7 +9,14 @@
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
 	import { AlbumResponseDto, api } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, albums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -39,6 +46,7 @@
 	import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
 	import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
+	import { browser } from '$app/env';
 
 	export let user: ImmichUser;
 	export let albums: AlbumResponseDto[];

web/src/routes/auth/logout.ts

@@ -1,8 +1,9 @@
-import { api } from '@api';
+import { api, serverApi } from '@api';
 import type { RequestHandler } from '@sveltejs/kit';
 
 export const POST: RequestHandler = async () => {
 	api.removeAccessToken();
+	serverApi.removeAccessToken();
 
 	return {
 		headers: {

web/src/routes/photos/[assetId].svelte

@@ -1,21 +1,20 @@
 <script context="module" lang="ts">
 	export const prerender = false;
 
+	import { browser } from '$app/env';
 	import type { Load } from '@sveltejs/kit';
 
-	export const load: Load = async ({ fetch }) => {
-		try {
-			await fetch('/data/user/get-my-user-info');
-
-			return {
-				status: 302,
-				redirect: '/photos'
-			};
-		} catch (e) {
+	export const load: Load = async ({ session }) => {
+		if (!browser && !session.user) {
 			return {
 				status: 302,
 				redirect: '/auth/login'
 			};
+		} else {
+			return {
+				status: 302,
+				redirect: '/photos'
+			};
 		}
 	};
 </script>

web/src/routes/photos/index.svelte

@@ -3,8 +3,14 @@
 
 	import type { Load } from '@sveltejs/kit';
 	import { setAssetInfo } from '$lib/stores/assets';
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
 
-	export const load: Load = async ({ fetch }) => {
 		try {
 			const [userInfo, assets] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -40,6 +46,7 @@
 	import { openFileUploadDialog, UploadType } from '$lib/utils/file-uploader';
 	import { AssetResponseDto, UserResponseDto } from '@api';
 	import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
+	import { browser } from '$app/env';
 
 	export let user: UserResponseDto;
 

web/src/routes/sharing/index.svelte

@@ -4,7 +4,14 @@
 	import type { Load } from '@sveltejs/kit';
 	import { AlbumResponseDto, api, UserResponseDto } from '@api';
 
-	export const load: Load = async ({ fetch }) => {
+	export const load: Load = async ({ fetch, session }) => {
+		if (!browser && !session.user) {
+			return {
+				status: 302,
+				redirect: '/auth/login'
+			};
+		}
+
 		try {
 			const [user, sharedAlbums] = await Promise.all([
 				fetch('/data/user/get-my-user-info').then((r) => r.json()),
@@ -33,6 +40,7 @@
 	import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
 	import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
 	import { goto } from '$app/navigation';
+	import { browser } from '$app/env';
 
 	export let user: UserResponseDto;
 	export let sharedAlbums: AlbumResponseDto[];