Question

我需要通过电子邮件恢复用户的密码，问题是当我通过电子邮件传递链接（例如http：// my-domain / recovery-password / token）时，它总是将我重定向到我的登录组件（http：// my-domain / login），我需要直接进入我的恢复密码组件。我的Vue有点新，我不知道需要更改什么，这是路由器中的代码：

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: '/login',
    name: 'login',
    component: LoginComponent,
    meta: {
      free: 1
    }
  },
  {
    path: '/recover-link', 
    name: 'recover-link',
    component: RecoverLinkComponent,
    meta: {
      free: 1
    }
  },
  {
    path: '/recover-password', 
    name: 'recover-password',
    component: RecoverPasswordComponent,    
    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 if(to.matched.some(record => record.meta.fuera)){
  //   next({
  //     name: 'recover-password'
  //   })  
  } else {
    next({
      name: 'login'
    })
  }
})

export default router

感谢您的帮助，因为我站了很长时间没有找到解决办法

Answer 1

我认为Vue会仔细检查所有路线，以找出其中有free个道具作为其元对象的一部分。

在到达Login路线之前，它总是先找到recover-password路线-它在Routes Array中的位置从上到下。

因此，尝试将recover-password路由放在登录路由之前，如下所示：


  {
    path: '/recover-password', 
    name: 'recover-password',
    component: RecoverPasswordComponent,    
    meta: {
      free: 1
    }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginComponent,
    meta: {
      free: 1
    }
  }

但是，您可能会开始在需要登录组件的地方遇到该恢复组件渲染。

因此，解决整个问题的最佳方法是为两个路由都提供不同的free值，然后在beforeEach钩中检查该值。

Answer 2

@nishkaush

这是我的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: {
      other: 1
    }
  },
  {
    path: '/recover-link', 
    name: 'recover-link',
    component: RecoverLinkComponent,
    meta: {
      free: 1
    }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginComponent,
    params: {
      recovery_email: 'email'
    },
    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()
  }
  
  /*This is where I have to call my recover-password component, 
  from an external link without redirecting to the login*/
  else if(to.matched.some(record => record.meta.other)){
    next()
  }
  else {
    next({
      name: 'login'
    })
  }
})

export default router

我想从外部链接vue路由器访问组件时出现问题

2 个答案: