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 /chat. Otherwise it will redirect you back to welcome.

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

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

methods: {
  enterChat(){
    if(this.name){
      this.$router.push({name: 'Chat', params: {name: this.name}})
    } else{
      // They have not entered a name, so display a message telling them
    }
  }
}

Hopefully this helps you set up route guards :)