Vue路由器从路由器链接访问元数据

Question

我使用vue3和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无法实现，隐藏链接的首选方式是什么。

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

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()
}
})

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

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