Navigation guards with file boot doesn't work form me

[bibogold]

Hello
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" }
 
  })
}

finally i have always this erreur :

NavigationDuplicated
_name: "NavigationDuplicated"
name: "NavigationDuplicated"
message: "Navigating to current location ("/login") is not allowed"

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>

[Mickey58]

I can’t tell what you’re problem exactly is, but I initially tried to implement a global route guard for my routes as well, and had lots of issues with it.

I changed my code to have individual route guards (with a separate beforeEach (to, from, next) on each route) instead of the global route guard, and that works without issues, though it duplicates some of the code.

[turigeza]

@bibogold doesn’t this bit

}else{
        
         //next({ path: "/auth" })
          //Router.push("/auth")
       
            console.log("maldkds");
             next({path:"/login"})
        
          
        }

execute when you are on the login page ? If so well that is why you get the duplicate navigation error.

Vue Router will through errors if you try to go to the same URI as you are on.

[bibogold]

@Mickey58 my problem is navigation guard don’t work for me i can’t put / without signIn i want redirect user if he is not signIn

[Mickey58]

@bibogold - maybe I didn’t understand your issue completely. I can say though that my individual navigation guards on each route do what you want - they check whether the user is logged in or not, and if not, they do a redirect to a login page:

…
component: () => import("…/pages/my-quasar-component.vue"),
beforeEnter: (to, from, next) => {
if (globalStore.state.userNotLoggedIn) { // this is my own store which holds login state
next({ name: “LoginRoute” }); // redirect to login route (per route name)
} else {
next(); // grant access to route/component
}
}