Javascript 高级Vue路由器防护

因此，我的路由器设置如下：

const路由=[
{
路径：“/”，
名称：'主页'，
组成部分：主页，
输入前：checkAuth，
元：{
requiresAuth:false，
showSidebar:false
}
},
{
路径：'/feed'，
名称：“FeedPage”，
组件：FeedPage，
输入前：checkAuth，
beforeRouteEnter:（（到、从、下一个）=>{
console.log（来自）
}),
元：{
是的，
showSidebar：正确
}
},
{
路径：'/faq'，
名称：“常见问题解答页面”，
组件：常见问题解答页面，
输入前：checkAuth，
元：{
是的，
showSidebar：正确
}
},
}
]

因此，checkAuth是一个基本上检查用户在进入该路径（使用google auth）之前是否经过身份验证的功能，它工作得非常好。但是我还想使用beforeRouteEnter来检查在身份验证后该路由中是否允许用户的指定。我将名称存储在Vuex商店中

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

---

另外，使用路由前保护的正确方法是什么？

根据Vue路由器文档，路由前保护没有访问该，因为在确认导航之前调用了保护，因此，甚至还没有创建新的输入组件

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

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

---

此外，根据您的需要，您可能还需要使用

beforeRouteUpdate

和

beforeRouteAve

，因为这两个

都是可用的（但这两个都不支持传递回调）
beforeEnter
和
beforeRouteEnter
都是具有相同目标的守卫，区别在于在哪里使用它

beforenter
是可以在路由的配置对象上定义的保护

beforeRouteEnter
是您在组件上定义的保护。

无论哪种方式，如果要访问Vuex存储，都应该导入它。
这可能是您的FeedPage组件在路由之前使用gn
的一个示例

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


从“../vuexstore.js”导入存储
导出默认值{
路由前（到、从、下一个）{
如果（Store.state.isAllowed）{
下一个（）
}否则{
下一个（假）
}                 
}

不要忘记使用
next（）
在验证后继续导航。
我可以在路由器中使用它，还是必须在组件中使用它？这3个是组件防护中的
，
因此您可以在路由组件（传递到路由器配置的组件）中使用它们