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](https://stackoverflow.com/questions/45721891/how-to-pass-data-from-one-view-to-another-with-the-vue-router) — ittus, Jun 02 '18 at 12:25
Possible have your answer https://stackoverflow.com/questions/45484684/vue-js-pass-data-to-component-on-another-route — ittus, Jun 02 '18 at 12:29

score 0 · Answer 1 · answered Jun 02 '18 at 10:29

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 02 '18 at 10:29

Vamsi Krishna

30,568
8
70
78

1

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. – Kingsley Abia Jun 02 '18 at 10:48
Do you have any clue how to avoid passing it by parameters @Kingsley ? – clst Nov 18 '20 at 21:40
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. – Kingsley Abia Nov 26 '20 at 13:20

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

1 Answers1