Access to a Vue route from external link

I have an application in vue with vue router that works correctly, also in the router I use navigation guards to protect my routes, the problem is that now I want to have routes or components that work outside the navigation guards, for example a page of password recovery that the user receives a link and can access it directly, my problem is that i want to access to a recovery password direct from a external link it always redirects me to the login. I share my code:

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/check-balance',
    name: 'check-balance',
    component: CheckBalanceComponent,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/check-payment',
    name: 'check-payment',
    component: CheckPaymentsComponent,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/payment-disabled',
    name: 'payment-disabled',
    component: DisabledMakePaymentComponent,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/handle-payment',
    name: 'handle-payment',
    component: HandlePaymentsComponent,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/handle-report',
    name: 'handle-report',
    component: HandleReportsComponent,
    meta: {
      user_type: 1
    }
  },
  {
    path: '/user-profile',
    name: 'user-profile',
    component: UserProfileComponent,
    meta: {
      user_type: 1
    }
  }, 
  {
    path: '/recover-password', 
    name: 'recover-password',
    component: RecoverPasswordComponent,    
    meta: {
      free: 1 //this outside navigation guards
    }
  },
  {
    path: '/recover-link', 
    name: 'recover-link',
    component: RecoverLinkComponent,
    meta: {
      free: 1
    }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginComponent,
    meta: {
      free: 1
    }
  },
  
  {
    path: '/help',
    name: 'help',
    component: HelpComponent,
    meta: {
      user_type: 1
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.free)){
    next()
  } 
  
  else if(store.state.user && store.state.user.user_type == 1){
    next()
  }

  else {
    next({
      name: 'login'
    })
  }
})

export default router

The code provided is currently not properly formatted for this forum. In its current state it’s illegible which makes it hard for people to help you.

Please read the following guide about how to properly format code and then edit your topic accordingly.

Thanks!

Done I have corrected the published code format

On the surface I can’t spot anything that looks off. Can you replicate the issue in a jsfiddle or Codesandbox for us?

Try putting some console logging in the beforeEach to check exactly what’s going on. In particular, check the details for the to.

Are you running directly off the Vue dev server or are you going through another server that could be doing the redirect? I’m thinking maybe the server redirects to / and then the router redirects / to /login. Shouldn’t be a problem if you’re just using the Vue dev server.