Vue JS permissions on routes

Question

I have a route that is like this:

{ path: '/testpage', component: Testpage},

I am using this to limit the route based on a user role like this:

let roles = {"exdir":"/testpage/"};

if (loggedIn){
    // return next('/affiliatepage')
    return next(roles[user.user.role]);
}

Now, I am trying to make it so that the user with the correct role can access that route plus all subroutes. For example, if I added:

/testpage/subpage

Is that even possible with the way I have it?

Answer 1

The way I use Navigation Guards is with beforeEnter. Some documentation on beforeEnter can be found here I have provided an example below. The if condition will check if the user has a name, you could check for a permission level. If the condition is true, proceed to /something. Otherwise it will redirect you back to home.

// Example of a Nav Guard
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/', // Home
      name: 'Home',
      component: Home
    },
    {
      path: '/something',
      name: 'Something',
      component: Something,
      props: true,
      // Route Guard
      beforeEnter: (to, from, next) => {
        if(to.params.blah) {
          next() // Take you to /something
        } else {
            // If params.blah is blank or in your case, does not have permission, redirect back to the home page
          next({ name: 'Home' }) 
        }
      }
    }
  ]
})

Below is an example method which will set the name for the router and allow the app to continue to /something

methods: {
  enterSomething() {
    if(this.blah) {
      this.$router.push({ name: 'Something', params: { name: this.blah } })
    } else {
      // Handle else condition logic
    }
  }
}

Hopefully this helps you set up route guards :)