首页 > 解决方案 > 导航守卫vue之外的路线

问题描述

我在 vue 中有一个使用 vue 路由器的应用程序可以正常工作,也在路由器中我使用导航防护来保护我的路由,问题是现在我想要在导航防护之外工作的路由或组件,例如一个页面用户收到链接并可以直接访问它的密码恢复,我的问题是我想直接从外部链接访问恢复密码它总是将我重定向到登录,我分享我的代码:

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

标签: javascriptvue.js

解决方案


推荐阅读