"Concealing specific routes in Vue Router depending on a certain condition - what's the

Question

"Concealing specific routes in Vue Router depending on a certain condition - what's the

I need to determine which routes to hide based on a condition that evaluates to true or false. I have a collection of routes, such as: - Products - Clients

For instance, if a user logs in but does not have the permission to edit products, then the updated list would only include: - Clients.

I am hiding certain routes based on their names using this syntax:

v-for="item in routes" v-if="item.name != 'Login"

.

To hide buttons, I apply the following approach:

AccionRegistrarProducto(){
        var userData = JSON.parse(localStorage.getItem("usuario"));
        var actions = userData.infoUser.Actions;
        if(actions.some(a => a.Action === 'Add Products')){
            this.actionAddProduct = true;
        }
        else{
            this.actionAddProduct = false;
        }
    },

I aim to extend this logic to hide specific routes from the list.

javascript vue.js vue-router

Answer 1

Answer №1

If you need to apply conditional rules to your routes, utilizing navigation guards in Vue Router is the way to go.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { // This function runs before route entry.
        // You can also place this logic inside a component
        // ...
      }
    }
  ]
})

In your code snippet, it would be structured like this

const router = new VueRouter({
  routes: [
    {
      path: '/foo', 
      component: Foo, 
      beforeEnter: (to, from, next) => {
        var userData = JSON.parse(localStorage.getItem("user"));
        var actions = userData.userInfo.Actions;
        if(actions.some(action => action.Action === 'Add Products')){
            next() // Allows route change
        }
        else{
            next(false) // Prevents route change, redirecting is also an option here.
        }
      }
    }
  ]
})

Learn more at: https://router.vuejs.org/guide/advanced/navigation-guards.html

Answer 2

If you need to apply conditional rules to your routes, utilizing navigation guards in Vue Router is the way to go.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { // This function runs before route entry.
        // You can also place this logic inside a component
        // ...
      }
    }
  ]
})

In your code snippet, it would be structured like this

const router = new VueRouter({
  routes: [
    {
      path: '/foo', 
      component: Foo, 
      beforeEnter: (to, from, next) => {
        var userData = JSON.parse(localStorage.getItem("user"));
        var actions = userData.userInfo.Actions;
        if(actions.some(action => action.Action === 'Add Products')){
            next() // Allows route change
        }
        else{
            next(false) // Prevents route change, redirecting is also an option here.
        }
      }
    }
  ]
})

Learn more at: https://router.vuejs.org/guide/advanced/navigation-guards.html

"Concealing specific routes in Vue Router depending on a certain condition - what's the

Answer №1

Similar questions

Develop an onclick function with an href attribute

Downloading a zip file using PHP works successfully when initiated directly, but encounters errors when attempted through a web application

Display a loading animation before the page loads upon clicking

Toggle visibility of table row upon user click (HTML/JQuery)

Error encountered during file download with AXIOS: TypeError - 'validateStatus' in blob cannot be searched using 'in' operator

Having issues with importing images in Next.js using the Next Images package

Transmit information from a Vue.js application to a Laravel application

What are the steps to generate an npm package along with definition files?

The JSP page does not redirect after an Ajax post request has been made

Guide on executing a Python script using Node.js

Changing a date string to MM DD format in React without using plain JavaScript

Troublesome update: Migrating XState's Reddit example from Vue 2 to Vue 3

An issue in D3.js where the chart bars are not properly synced with the x-axis labels

Validator alert for AMP scripts

Execute operations on element itself rather than the output of document.getElementbyId

AngularJS Date Selection with UI Bootstrap Tool

Mapping data visually

Implementing pagination in React: A step-by-step guide

Troubleshooting problem with Materialize CSS in UI router

What are some secure methods for integrating iframes into an Angular 7 project?