vue-router - Vue路由器从router-link访问元数据

Question

我使用vue3and vue-router-4，并试图为未经授权的用户隐藏一些路由器链接：

路线文件：

{
  path: "/users/create",
  name: "UserCreate",
  meta: {
    title: "Create user",
    requiresAuth: true
  },
  component: () =>
    import(/* webpackChunkName: "create" */ "@/views/Users/Create.vue")
}

如您所见，我requiresAuth: true在这条路线中有元数据，所以我想为客人隐藏它。

我想在我的视图中使用这样的东西（v-if部分，它不起作用）：

<router-link v-if="route.meta.requiresAuth === isLoggedIn()" to="/users/create" class="nav-link"
      >Create user</router-link>

请告知我如何实现这一点，如果无法实现meta fields- 隐藏链接的首选方法是什么。

PS 当然，所有的访问验证和检查都将在后端执行，但我仍然不想显示他们无法查看的用户链接。

Answer 1

请记住，这只会隐藏链接，用户仍然可以通过 URL 访问这些路由。before除了隐藏链接之外，您还需要使用导航守卫：

导航守卫：

//router.js

router.beforeEach((to,from,next)=>{
   if ( to.matched.some(record => record.meta.requiresAuth) {
     if( isLoggedIn()) {
        next()
     }  else {
       // if user is not logged what should happen
    }
   } else {
     next()
   }
})

如果需要 Auth 并且用户未通过身份验证，则隐藏链接：

<router-link v-if="isLoggedIn()" to="/users/create" class="nav-link"> 
  Create user
</router-link>