Passing data between paths using $router.push() in VueJS

Question

I am kinda new to VueJS and I am trying to pass the role of a user from the login path after he/she has been authenticated to the home page where I can then determine what links the user can see using v-if. Below is my login.vue code:

this.$axios({
                      method: 'post',
                      url: 'api/role',
                      data: {
                        'email': this.username
                      },
                      headers: {'Authorization': 'Bearer '+ this.$tokens.getToken()}
                    })
                    .then(response => {
                        this.role = response.data['role'];
                        
                    })
    				this.$router.push('/');
    			})
    			.catch(function(error){
    				console.log(error);
    			})

How can I pass the 'this.role' value to path '/' so I can access it from there?

Possible duplicate of How to pass data from one view to another with the vue-router — ittus
– ittus, Commented Jun 2, 2018 at 12:25
Possible have your answer stackoverflow.com/questions/45484684/… — ittus
– ittus, Commented Jun 2, 2018 at 12:29

Vamsi Krishna · Accepted Answer · 2018-06-02 10:29:22Z

0

You can use a query to pass the role.

So add a query where you programmatically navigate the user to homepage:

this.$router.push({path:'/', query:{role: this.role}});

Then in your home page component you can retrieve the route queries for your functionality

For example:

//homme page component

created(){
  if(this.$route.query.role === 'admmin){
    //this is admin
  }
}

answered Jun 2, 2018 at 10:29

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kingsley Abia Over a year ago

Thanks for your answer. But I actually want to avoid passing the role via url as the user can easily edit the url parameters and access restricted pages.

clst Over a year ago

Do you have any clue how to avoid passing it by parameters @Kingsley ?

Kingsley Abia Over a year ago

Urrhh.. @Kelvin, What I eventually had to do was to use the Vue state management tool (Vuex) to handle role management and other sensitive information like token which I didn't want to pass via url.

Collectives™ on Stack Overflow

Passing data between paths using $router.push() in VueJS

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related