Quasar framework : Navigation guards with file boot doesn't? - vue.js

Question

i just make register app to test login , register and navigation guards but always i can open the link i will put the code to help me
router/routes.js
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{
path: '',
meta:{signIn:true},
component: () => import('pages/Index.vue')
},
{
path: 'login',
component: () => import('pages/auth.vue')
},
]
}
]
// Always leave this as last one
if (process.env.MODE !== 'ssr') {
routes.push({
path: '*',
component: () => import('pages/Error404.vue')
})
}
export default routes
this is file boot :boot/router-auth.js
// import something here
import {firebaseAuth} from "boot/firebase"
// "async" is optional
export default ({ router/* app, router, Vue, ... */ }) => {
// something to do
router.beforeEach((to,from,next) =>{
if(to.matched.some(route =>route.meta.signIn)){
if(firebaseAuth.currentUser)
{
next()
}else{
//next({ path: "/auth" })
//Router.push("/auth")
console.log("maldkds");
next({path:"/login"})
}
}
next()
//{ path: "/login" }
})
}
and this is my MainLayout.vue
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-toolbar-title class="text-center">
{{title}}
</q-toolbar-title>
<div class="row">
<q-btn flat dense round v-if="!userDetails.userId" color="white" icon="person" no-caps label="Login" />
<q-btn flat dense round v-else color="white" icon="person" no-caps #click="logoutUser" >Logout <br/> {{userDetails.name}} </q-btn>
</div>
<div></div>
</q-toolbar>
</q-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
name: 'MainLayout',
data () {
return {
}
},
computed:{
...mapState("store",["userDetails"]),
title(){
if(this.$route.fullPath=="/"){
return "Register App"
} else if(this.$route.fullPath=="/login"){
return "Auth"
}
}
},
methods:{
...mapActions("store",["logoutUser"]),
}
}
</script>
<style>
.q-toolbar .q-btn{
line-height: 1.2;
}
</style>
Finally i have always this error:
NavigationDuplicated
_name: "NavigationDuplicated" name: "NavigationDuplicated" message: "Navigating to current location ("/login") is not allowed"

Answer 1

I resolved by creating const Router and exporting, after Route, use beforeEach with you validate.
import Vue from 'vue'
import VueRouter from 'vue-router'
import { isAuth, isAdmin, isUser } from "./auth";
import routes from './routes'
Vue.use(VueRouter)
const Router = new VueRouter({
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE,
scrollBehavior: () => ({ y: 0 }),
routes
})
Router.beforeEach((to,from, next) => {
to.matched.some( route =>{
if(route.meta.requiresAuth){
if(!isAuth()){
next({ path: '/' })
}
}
next()
})
})
export default Router

Answer 2

Put debugger as the first line of your router.beforeEach() and examine what is inside to.matched. It is possible that it is matching the route with path '' and it may redirect /login to /login, aka. redirect loop.