I have created a Vue.js/Firebase authentication interface following a tutorial. The app is mostly functioning properly, but I am experiencing issues with the route guard. Upon signing in and redirecting from "http://localhost:8080/home" to "http://localhost:8080/", the landing page prompts users to sign up or sign in again even though they are already logged in. Ideally, inputting "http://localhost:8080/" while logged in should just direct them back to the home page. How can I adjust the routing setup to achieve this? Here is an overview of my current routing configuration based on the tutorial:
import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'
const routerOptions = [
{ path: '/', component: 'Landing' },
{ path: '/signin', component: 'Signin' },
{ path: '/signup', component: 'Signup' },
{ path: '/home', component: 'Home', meta: { requiresAuth: true } },
{ path: '*', component: 'NotFound' }
]
const routes = routerOptions.map(route => {
return {
...route,
component: () => import(`@/components/${route.component}.vue`)
}
})
Vue.use(Router)
const router = new Router({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
const isAuthenticated = firebase.auth().currentUser
if (requiresAuth && !isAuthenticated) {
next('/signin')
} else {
next()
}
})
export default router