Navigation guards with file boot doesn't work form me



  • 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>
    
    


  • 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.



  • @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.



  • @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



  • @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
    }
    }


Log in to reply