fix: auth and move logic to router (#1201)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1201
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

src/App.vue

@@ -6,8 +6,10 @@
 				<content-auth/>
 			</template>
 			<content-link-share v-else-if="authLinkShare"/>
-			<content-no-auth v-else/>
+			<no-auth-wrapper v-else>
-			<notification/>
+				<router-view/>
+			</no-auth-wrapper>
+			<Notification/>
 		</div>
 
 		<transition name="fade">
@@ -31,7 +33,7 @@ import KeyboardShortcuts from './components/misc/keyboard-shortcuts/index.vue'
 import TopNavigation from './components/home/topNavigation.vue'
 import ContentAuth from './components/home/contentAuth.vue'
 import ContentLinkShare from './components/home/contentLinkShare.vue'
-import ContentNoAuth from './components/home/contentNoAuth.vue'
+import NoAuthWrapper from '@/components/misc/no-auth-wrapper.vue'
 import Ready from '@/components/misc/ready.vue'
 
 import {setLanguage} from './i18n'

src/components/home/contentAuth.vue

@@ -64,21 +64,25 @@ const route = useRoute()
 // hide menu on mobile
 watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
 
+// FIXME: this is really error prone
 // Reset the current list highlight in menu if the current route is not list related.
-watch(() => route.fullPath, () => {
+watch(() => route.name as string, (routeName) => {
 	if (
-		[
+		routeName &&
-			'home',
+		(
-			'namespace.edit',
+			[
-			'teams.index',
+				'home',
-			'teams.edit',
+				'namespace.edit',
-			'tasks.range',
+				'teams.index',
-			'labels.index',
+				'teams.edit',
-			'migrate.start',
+				'tasks.range',
-			'migrate.wunderlist',
+				'labels.index',
-			'namespaces.index',
+				'migrate.start',
-		].includes(route.name) || 
+				'migrate.wunderlist',
-		route.name.startsWith('user.settings')
+				'namespaces.index',
+			].includes(routeName) || 
+			routeName.startsWith('user.settings')
+		)
 	) {
 		store.dispatch(CURRENT_LIST, null)
 	}

src/components/home/contentNoAuth.vue

@@ -1,41 +0,0 @@
-<template>
-	<no-auth-wrapper>
-		<router-view/>
-	</no-auth-wrapper>
-</template>
-
-<script lang="ts" setup>
-import {watchEffect} from 'vue'
-import {useRoute, useRouter} from 'vue-router'
-
-import NoAuthWrapper from '@/components/misc/no-auth-wrapper'
-
-import {saveLastVisited} from '@/helpers/saveLastVisited'
-
-const route = useRoute()
-
-watchEffect(() => {
-	if (!route.name) return
-	redirectToHome()
-})
-
-const router = useRouter()
-function redirectToHome() {
-	// Check if the user is already logged in and redirect them to the home page if not
-	if (
-		![
-			'user.login',
-			'user.password-reset.request',
-			'user.password-reset.reset',
-			'user.register',
-			'link-share.auth',
-			'openid.auth',
-		].includes(route.name) &&
-		localStorage.getItem('passwordResetToken') === null &&
-		localStorage.getItem('emailConfirmToken') === null
-	) {
-		saveLastVisited(route.name, route.params)
-		router.push({name: 'user.login'})
-	}
-}
-</script>

src/main.ts

@@ -133,8 +133,8 @@ if (window.SENTRY_ENABLED) {
 	import('./sentry').then(sentry => sentry.default(app, router))
 }
 
-app.use(router)
 app.use(store)
+app.use(router)
 app.use(i18n)
 
 app.mount('#app')

src/router/index.ts

@@ -1,4 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, RouteLocation } from 'vue-router'
+import {saveLastVisited} from '@/helpers/saveLastVisited'
+import {store} from '@/store'
 
 import HomeComponent from '../views/Home'
 import NotFoundComponent from '../views/404'
@@ -573,16 +575,34 @@ const router = createRouter({
 	],
 })
 
-// bad example if using named routes:
+router.beforeEach((to) => {
-router.resolve({
+	return checkAuth(to)
-	name: 'bad-not-found',
+})
-	params: { pathMatch: 'not/found' },
-}).href // '/not%2Ffound'
 
-// good example:
+function checkAuth(route: RouteLocation) {
-router.resolve({
+	const authUser = store.getters['auth/authUser']
-	name: 'not-found',
+	const authLinkShare = store.getters['auth/authLinkShare']
-	params: { pathMatch: ['not', 'found'] },
+
-}).href // '/not/found'
+	if (authUser || authLinkShare) {
+		return
+	}
+
+	// Check if the user is already logged in and redirect them to the home page if not
+	if (
+		![
+			'user.login',
+			'user.password-reset.request',
+			'user.password-reset.reset',
+			'user.register',
+			'link-share.auth',
+			'openid.auth',
+		].includes(route.name as string) &&
+		localStorage.getItem('passwordResetToken') === null &&
+		localStorage.getItem('emailConfirmToken') === null
+	) {
+		saveLastVisited(route.name as string, route.params)
+		return {name: 'user.login'}
+	}
+}
 
 export default router