javascript - 高级 Vue 路由器守卫

标签 javascript vue.js

所以,我的路由器设置如下:

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 身份验证)之前检查用户是否已通过身份验证,它工作得很好。但我也想使用 beforeRouteEnter 来检查身份验证后该路由中是否允许用户指定。我在 Vuex 商店中指定了存储

如何使用 this 关键字来使用插件?

还有,beforeRouteEnter 的正确使用方法是什么?

最佳答案

根据 Vue Router 文档,beforeRouteEnter 守卫没有可以访问this,因为守卫在导航之前被调用已确认,因此新的进入组件还没有创建。

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

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

还有 beforeRouteUpdate & beforeRouteLeave 你可能想根据你的需要使用,因为这些 this 是可用的(但传递回调这两个不支持)

关于javascript - 高级 Vue 路由器守卫,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56472607/

相关文章:

Javascript 将 Date() 转换为 YYYY-MM-DD HH :MM:SS

javascript - firebase数据库中如何同时将数据存储在两个地方?

javascript - 将点击监听器添加到自定义按钮在 Angular 数据表中不起作用

javascript - 为什么 Browsersync 会实时重新加载一个编译任务而不是另一个?

html - 如何让 Vue b-table 滚动带有固定标题的正文

javascript - Angularjs 同一 Controller 的两种形式

php - Laravel - 护照/SPA 401 未经授权

javascript - 如何使用 Vue.js mixins 替换字符串值?

javascript - Vue.js 中的事件监听器

javascript - 如何在 Vuetify 中针对不同屏幕尺寸使用断点?