Vue router access meta data from router-link

Question

I use vue3 and vue-router-4, and am trying to hide some router links for unauthorized users:

Route file:

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

As you can see I have requiresAuth: true meta in this route, so I want to hide this for guests.

I want to use something like this in my views (v-if part, which is not working):

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

Please advise how I can achieve this, and if it's not possible with meta fields - what is the preferred way to hide links.

P.S. Of course all validation and checks of accesses will be performed at the back-end side, but I still don't want to show user links which they can't view.

Abdelillah Aissani · Answer 1 · 2021-01-01T21:14:11.627

0

Keep in mind that this only hides the links, users can still access these routes through the URL. you need to use the before navigation guard in addition to hiding links:

Navigation guard :

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

Hide links if they require Auth and the user is not authenticated:

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

edited Jan 01 '21 at 21:14

answered Jan 01 '21 at 20:38

Abdelillah Aissani

3,058
2
10
25

Are you sure that `$route` inside `v-if` points to the router-link's route? As far as I can see it always points to the current route, where user sits at the moment. When I need it to represent route where user will go, if he clicks this router-link. P.S. Thanks, I already use beforeEach, just need to hide link now. – walemy Jan 01 '21 at 21:04
@walemy I miss understood what you wanted to achieve, If you want to show the route link only for auth users then simply use that as a condition ( i updated ), meta values are to be used on the navigation guard – Abdelillah Aissani Jan 01 '21 at 21:14
@AbdelillahAissani `isLoggedIn` should be a computed property and used without `()` `v-if="isLoggedIn"` – Boussadjra Brahim Jan 01 '21 at 21:20
@Abdelillah Yes, i understand that this is an option, but it will lead to duplicatation of this "permissions" in routes file (for navigation guards) and then in router-link. So if in some point i decide to change this - i'll have to change this twice. And if I forget to change in one of two places - unexpected things will happen. While I want to have only one declaraion, and use it in both routes file and views (if it's possible). – walemy Jan 01 '21 at 21:23
@AbdelillahAissani And yes, I'm using this as computed property. Just simplified it here for the example. But thanks anyways :) – walemy Jan 01 '21 at 21:27
@walemy pleasure to help, it would be great if you can attach a [codesandbox](https://codesandbox.io/s/vue) instance, that will be easier to solve your issue, Good luck! – Abdelillah Aissani Jan 01 '21 at 22:16

Vue router access meta data from router-link

1 Answers1