Question

所以，我的路由器设置如下：

const routes = [
  {
    path: '/',
    name: 'HomePage',
    component: HomePage,
    beforeEnter: checkAuth,
    meta: {
      requiresAuth: false,
      showSidebar: false
    }
  },
  {
    path: '/feed',
    name: 'FeedPage',
    component: FeedPage,
    beforeEnter: checkAuth,
    beforeRouteEnter: ((to, from, next) => {
      console.log(from)
    }),
    meta: {
      requiresAuth: true,
      showSidebar: true
    }
  },
  {
    path: '/faq',
    name: 'FAQPage',
    component: FAQPage,
    beforeEnter: checkAuth,
    meta: {
      requiresAuth: true,
      showSidebar: true
    }
  },
 }
]

因此 checkAuth 是一项功能，该功能基本上可以在输入该路由（使用google auth）之前检查用户是否通过了身份验证，该功能非常有效。但是，我还想使用 beforeRouteEnter 来检查AFTER身份验证后在该路由中是否允许用户指定。我在Vuex商店中指定了 stored 。

如何使用这个关键字，以便可以使用插件？

而且，使用 beforeRouteEnter 的正确方法是什么？

Answer 1

根据Vue路由器文档， beforeRouteEnter 防护确实无法访问 this ，因为在导航开始之前调用了该防护确认，因此尚未输入新的输入组件。

但是，您可以通过将回调传递给next来访问实例。确认导航后，将调用该回调，并将组件实例作为参数传递给回调：

beforeRouteEnter (to, from, next) {
  next(vm => {
     // access to component instance via `vm`
  })
}

根据您的需要，您可能还希望使用beforeRouteUpdate和beforeRouteLeave，因为这些this可用（但是这两个都不支持传递回调）

Answer 2

beforeEnter和beforeRouteEnter都是目标相同的后卫，区别在于使用方法。

beforeEnter是您可以在路由的配置对象上定义的防护。 https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

beforeRouteEnter是您在组件上定义的防护。 https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

无论哪种方式，如果您想访问Vuex商店，都应该将其导入。这可能是您的 FeedPage 组件使用beforeRouteEnter

的示例

<script>
import Store from '../vuexstore.js'
export default{
  beforeRouteEnter(to,from,next){
    if(Store.state.isAllowed){ 
      next() 
    } else { 
      next(false) 
    }                 
}
</script>

别忘了在验证后使用next()继续导航。

先进的Vue路由器防护

2 个答案: