Currently, I am facing an issue with redirecting users using Firebase Auth and Vue Router.
The problem arises when the Router redirects the user to '/' as it results in a blank white screen on the website.
I am aware that there is an error in my implementation, but pinpointing the exact issue has been challenging for me.
Below is an excerpt from my 'router.js' file:
const router = new Router({
routes: [
{
path: '*',
redirect: '/login'
},
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'Home',
component: Home,
meta: {
authenticated: true
}
}
]
})
router.beforeEach((to, from, next) => {
let user = firebase.auth().currentUser;
let authorization = to.matched.some(record => record.meta.authenticated)
if (authorization && !user) {
next('/login')
} else if (!authorization && user && from.path !== '/') {
next('/')
}
})
export default router