From e6d140fdda8c3556f1f2c260f5ddc718c89455ac Mon Sep 17 00:00:00 2001 From: Resul Avan Date: Fri, 31 Jul 2020 01:13:01 +0200 Subject: [PATCH 1/2] wrong redirect fix --- src/components/navbar/ActionTopNavbar.vue | 48 ----------------------- src/components/navbar/TopNavbar.vue | 16 ++------ src/layouts/action.vue | 40 ------------------- src/pages/auth/action.vue | 17 ++++---- src/pages/auth/forget-password.vue | 7 ++-- src/pages/auth/reset-password.vue | 11 +++--- src/plugins/firebase-auth-listener.ts | 28 ++++++------- 7 files changed, 34 insertions(+), 133 deletions(-) delete mode 100644 src/components/navbar/ActionTopNavbar.vue delete mode 100644 src/layouts/action.vue diff --git a/src/components/navbar/ActionTopNavbar.vue b/src/components/navbar/ActionTopNavbar.vue deleted file mode 100644 index 75a413d..0000000 --- a/src/components/navbar/ActionTopNavbar.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - diff --git a/src/components/navbar/TopNavbar.vue b/src/components/navbar/TopNavbar.vue index 9e2bf27..7f75e35 100644 --- a/src/components/navbar/TopNavbar.vue +++ b/src/components/navbar/TopNavbar.vue @@ -34,21 +34,13 @@
- + {{ $t('topNavbar.register') }} - + - + {{ $t('topNavbar.login') }} - +
diff --git a/src/layouts/action.vue b/src/layouts/action.vue deleted file mode 100644 index 23a5b25..0000000 --- a/src/layouts/action.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - diff --git a/src/pages/auth/action.vue b/src/pages/auth/action.vue index 603cc35..70a486b 100644 --- a/src/pages/auth/action.vue +++ b/src/pages/auth/action.vue @@ -33,19 +33,18 @@ import { import { getWarningNotificationMessage } from '~/service/notification-service' @Component({ - components: {}, - layout: 'action' + components: {} }) export default class Action extends Vue { - action: string = ''; - actionCode: string = ''; + action: string = '' + actionCode: string = '' - isLoading = true; - isFullPage = false; + isLoading = true + isFullPage = false - @StateNamespace.auth.Action handleVerifyEmail: (actionCode: string) => Promise; - @StateNamespace.auth.Action handleVerifyPasswordResetCode: (actionCode: string) => Promise; - @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {}; + @StateNamespace.auth.Action handleVerifyEmail: (actionCode: string) => Promise + @StateNamespace.auth.Action handleVerifyPasswordResetCode: (actionCode: string) => Promise + @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {} asyncData ({ query }: Context) { const action = (query[FirebaseAuthActionParams.ACTION]) diff --git a/src/pages/auth/forget-password.vue b/src/pages/auth/forget-password.vue index 028412c..56c488d 100644 --- a/src/pages/auth/forget-password.vue +++ b/src/pages/auth/forget-password.vue @@ -8,12 +8,11 @@ import ForgetPasswordForm from '~/components/form/ForgetPasswordForm.vue' import { StateNamespace } from '~/types' @Component({ - components: { ForgetPasswordForm }, - layout: 'action' + components: { ForgetPasswordForm } }) export default class ForgetPassword extends Vue { - @StateNamespace.auth.Action sendPasswordResetEmail: (code: any) => Promise; - @StateNamespace.notification.Action clearNotificationMessage: () => void; + @StateNamespace.auth.Action sendPasswordResetEmail: (code: any) => Promise + @StateNamespace.notification.Action clearNotificationMessage: () => void handleSendPasswordResetEmail (emailAddress: string) { this.clearNotificationMessage() diff --git a/src/pages/auth/reset-password.vue b/src/pages/auth/reset-password.vue index d12f9c7..ff96b6b 100644 --- a/src/pages/auth/reset-password.vue +++ b/src/pages/auth/reset-password.vue @@ -23,15 +23,14 @@ import { NotificationMessage, RouteParameters, StateNamespace } from '~/types' import { getWarningNotificationMessage } from '~/service/notification-service' @Component({ - components: { SetPasswordForm }, - layout: 'action' + components: { SetPasswordForm } }) export default class ResetPassword extends Vue { - actionCode: string = ''; + actionCode: string = '' - @StateNamespace.auth.Action confirmPasswordReset: (code: any) => {}; - @StateNamespace.notification.Action clearNotificationMessage: () => void; - @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {}; + @StateNamespace.auth.Action confirmPasswordReset: (code: any) => {} + @StateNamespace.notification.Action clearNotificationMessage: () => void + @StateNamespace.notification.Action saveNotificationMessage: (notificationMessage: NotificationMessage) => {} handleConfirmPasswordReset (password: string) { this.clearNotificationMessage() diff --git a/src/plugins/firebase-auth-listener.ts b/src/plugins/firebase-auth-listener.ts index 59d6374..f7640d6 100644 --- a/src/plugins/firebase-auth-listener.ts +++ b/src/plugins/firebase-auth-listener.ts @@ -5,14 +5,14 @@ import { Location, Route } from 'vue-router' import { AppCookie, AppTokenType, AuthUser, FirebaseClaimKey } from 'types-module' import { auth } from '~/plugins/fire-init-plugin' import { - LocalStorageKey, + LocalStorageKey, LOGIN, QueryParameters, Routes, sessionCookieOptionsDev, sessionCookieOptionsProd, StoreConfig } from '~/types' -import { authenticatedAllowed, authenticatedNotAllowed } from '~/service/global-service' +import { authenticatedAllowed, authenticatedNotAllowed, getUserRoute } from '~/service/global-service' import { getAuthUser } from '~/service/firebase/firebase-service' import { configureAxiosObservable, configureFcmObservable, loadNotificationObservable } from '~/service/rx-service' @@ -22,14 +22,15 @@ const forceLogout = (store: Store) => { }) } -const getNextRoute = (route: Route): Location => { +const getNextRoute = (route: Route, authUser: AuthUser): Location => { const path: string = route.query[QueryParameters.NEXT] as string + console.log(`firebaseAuthListenerPlugin next: ${path}, fullPath: ${route.fullPath}, route.path: ${route.path}`) if (path) { return { path } } if (authenticatedNotAllowed(route) || route.path === Routes.ACTION.path) { - return Routes.PROFILE + return getUserRoute(Routes.PROFILE_DYNAMIC, authUser.username) } return { path: route.fullPath } @@ -40,17 +41,20 @@ const setRememberMe = async (store: Store, app: NuxtAppOptions) => { await store.dispatch(StoreConfig.auth.saveRememberMe, rememberMe === undefined ? true : rememberMe) } -const updateAuthStore = async (firebaseUser: User|null, store: Store) => { +const updateAuthStore = async (firebaseUser: User, store: Store) => { if (!firebaseUser) { store.commit(StoreConfig.auth.setAuthUser, null) + return null } - return await firebaseUser?.getIdTokenResult() + + return await firebaseUser.getIdTokenResult() .then((idTokenResult) => { const authUser = getAuthUser(firebaseUser) as AuthUser if (authUser) { authUser.username = idTokenResult.claims[FirebaseClaimKey.USERNAME] store.commit(StoreConfig.auth.setAuthUser, authUser) } + return authUser }) } @@ -73,7 +77,7 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) => console.log(error) }) - auth.onAuthStateChanged((firebaseUser: User|null) => { + auth.onAuthStateChanged((firebaseUser: User) => { return store.dispatch(StoreConfig.loading.saveLoading, true) .then(async () => { if (store.state.auth.forceLogout) { @@ -82,11 +86,7 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) => } console.log('firebaseAuthListenerPlugin called with a user: ', !!firebaseUser) - - await updateAuthStore(firebaseUser, store) - .catch((error: Error) => { - console.log(error) - }) + const authUser = await updateAuthStore(firebaseUser, store) if (firebaseUser) { await firebaseUser.getIdToken() @@ -97,11 +97,11 @@ const firebaseAuthListenerPlugin: Plugin = ({ store, app, route, redirect }) => configureFcmObservable.next() }) - redirect(getNextRoute(route)) + redirect(getNextRoute(route, authUser)) } else { logoutActions(store, app) if (authenticatedAllowed(route)) { - redirect(Routes.LOGIN) + location.replace(LOGIN.path) } } }) From ddd4ed1cce31daf31de553e3b6c2e2c9aacee8d6 Mon Sep 17 00:00:00 2001 From: Resul Avan Date: Fri, 31 Jul 2020 01:46:09 +0200 Subject: [PATCH 2/2] loading view when user is loading --- src/pages/profile/index.vue | 16 ++++++++---- src/pages/u/_username/index.vue | 45 +++++++++++++++++++-------------- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue index 0a70d0a..ebbe65d 100644 --- a/src/pages/profile/index.vue +++ b/src/pages/profile/index.vue @@ -18,8 +18,9 @@ export default class profile extends Vue { user: User|null = null @StateNamespace.auth.Getter readonly authUser: AuthUser; + @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise - created () { + mounted () { this.$subscribeTo(profilePhotoObservable.asObservable(), (image: Image) => { if (this.user) { this.user.profilePhoto = image @@ -41,11 +42,16 @@ export default class profile extends Vue { } loadUser () { - getUser(this.authUser.userId) - .then((user: User) => { - this.user = user + this.saveLoading(true) + .then(async () => { + await getUser(this.authUser.userId) + .then((user: User) => { + this.user = user + }) + .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad'))) }) - .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad'))) + .catch((error: Error) => console.log('profile.create', error)) + .finally(() => this.saveLoading(false)) } } diff --git a/src/pages/u/_username/index.vue b/src/pages/u/_username/index.vue index 315a8c9..dc0070c 100644 --- a/src/pages/u/_username/index.vue +++ b/src/pages/u/_username/index.vue @@ -20,6 +20,7 @@ export default class profile extends Vue { user: User|null = null @StateNamespace.auth.Getter readonly authUser: AuthUser + @StateNamespace.loading.Action saveLoading: (loading: boolean) => Promise asyncData ({ params }: Context) { const username = params[RouteParameters.USERNAME] @@ -29,7 +30,7 @@ export default class profile extends Vue { } } - async created () { + mounted () { this.$subscribeTo(profilePhotoObservable.asObservable(), (image: Image) => { console.log('profilePhotoObservable called by ', image) if (this.user) { @@ -57,26 +58,32 @@ export default class profile extends Vue { }) } - const user = await this.loadUser() - .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad'))) as User - if (!user) { - return this.$nuxt.error({ - message: this.$t('page.notFound') as string, - path: this.$route.fullPath, - statusCode: 404 - }) - } + this.saveLoading(true) + .then(async () => { + const user = await this.loadUser() + .catch(() => sendDangerNotification(this.$store.dispatch, this.$t('notification.profile.canNotLoad'))) - if (this.authUser.username !== this.username && - ((!user?.privacy || user.privacy === PrivacyType.PRIVATE))) { - console.log('PRIVATE user') - this.$nuxt.error({ - message: this.$t('page.notFound') as string, - path: this.$route.fullPath, - statusCode: 404 + if (!user) { + return this.$nuxt.error({ + message: this.$t('page.notFound') as string, + path: this.$route.fullPath, + statusCode: 404 + }) + } + + if (this.authUser.username !== this.username && + ((!user?.privacy || user.privacy === PrivacyType.PRIVATE))) { + console.log('PRIVATE user') + this.$nuxt.error({ + message: this.$t('page.notFound') as string, + path: this.$route.fullPath, + statusCode: 404 + }) + } + this.user = user }) - } - this.user = user + .catch((error: Error) => console.log('profile.create', error)) + .finally(() => this.saveLoading(false)) } async loadUser (): Promise {