我使用 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
无法实现 - 隐藏链接的首选方法是什么。
附言当然,所有访问的验证和检查都会在后端进行,但我仍然不想显示他们无法查看的用户链接。
答案 0 :(得分: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>