Nested Route on q-page using meta auth



  • Im developing an app using quasar and firebase and i do have a problem regarding of using meta ive already created firebase custom clasm and it worked but the thing is the nested route on the q-page cannot access all the children or show on the side page
    this is my nested route along with the meta auth

    const routes = [
        // {
        //     path: '/',
        //     component: () =>
        //         import ('layouts/MainForm'),
        //     meta: {
        //         requiresAuth: true,
        //     },
        // },
        {
            path: '/LoginForm',
            component: () =>
                import ('layouts/LoginForm'),
            meta: {
                requiresGuest: true,
            },
        },
        {
            path: '/MainForm',
            component: () =>
                import ('layouts/MainForm'),
            meta: {
                requiresAuth: true,
            },
            children: [{
                    path: '/',
                    component: () =>
                        import ('pages/PageDashboard.vue')
                },
                {
                    path: 'Dashboard',
                    component: () =>
                        import ('pages/PageDashboard.vue')
                },
                {
                    path: 'PageRoom',
                    component: () =>
                        import ('pages/PageRoom'),
                },
                {
                    path: 'PageInventory',
                    component: () =>
                        import ('pages/PageInventory.vue')
                },
                {
                    path: '/PageUser',
                    component: () =>
                        import ('pages/PageUser.vue')
                },
                {
                    path: 'PageWorkSchedule',
                    component: () =>
                        import ('pages/PageTasks.vue')
                },
                {
                    path: 'SiteMaintenance',
                    component: () =>
                        import ('pages/SiteMaintenance.vue')
                }
            ]
        },
        {
            path: '/SubForm',
            component: () =>
                import ('layouts/SubForm'),
            meta: {
                requiresAuth: true,
            },
            children: [{
                    path: '/Dashboard',
                    component: () =>
                        import ('pages/PageDashboard.vue'),
                },
                {
                    path: '/PageUser',
                    component: () =>
                        import ('pages/PageUser.vue')
                }
            ]
        },
        {
            path: '/Dashboard',
            component: () =>
                import ('pages/PageDashboard.vue'),
        },
    
    ]
    
    // Always leave this as last one
    if (process.env.MODE !== 'ssr') {
        routes.push({
            path: '*',
            component: () =>
                import ('pages/Error404.vue')
        })
    }
    
    export default routes```
    code_text
    

    this is my working custom claim and route using firebase

    import { firebaseAuth } from 'boot/firebase'
    import { LocalStorage } from 'quasar'
    
    export default ({ router }) => {
        router.beforeEach((to, from, next) => {
            let requiresGuest = to.matched.some(record => record.meta.requiresGuest)
            let requiresAuth = to.matched.some(record => record.meta.requiresAuth)
            let loggedIn = LocalStorage.getItem('loggedIn')
    
            if (requiresGuest) {
                if (!loggedIn && to.path !== '/LoginForm') {
                    next('/LoginForm')
                } else {
                    next()
                }
    
            } else if (requiresAuth) {
                firebaseAuth.onAuthStateChanged(userAuth => {
                    if (userAuth) {
                        firebaseAuth.currentUser.getIdTokenResult()
                            .then((idTokenResult) => {
                                if (!!idTokenResult.claims.admin && to.path !== '/MainForm') {
                                    next({
                                        path: '/MainForm',
                                        query: {
                                            redirect: to.fullPath
                                        }
                                    })
                                } else if (!!idTokenResult.claims.user && to.path !== '/SubForm') {
                                    next({
                                        path: '/SubForm',
                                        query: {
                                            redirect: to.fullPath
                                        }
                                    })
                                } else {
                                    next()
                                }
                            })
                            .catch((error) => {
                                console.log(error);
                            });
                    }
                })
            } else {
                next()
            }
        })
    }
    

    can someone help me regarding to this? thank you in advance


Log in to reply