title: VueJS role based authentication with router
body: <p>My use case is something like this.</p>
  
  <ol>
  <li>When someone login to the system, I identify user role at the <strong>login action</strong> and store that value <strong>as a state</strong>.</li>
  <li>I have 3 user roles, namely <strong>student</strong>,<strong>admin</strong> and <strong>dataEntry</strong></li>
  <li>I have 3 separates routes for these 3 roles as well.(/student,/admin,/dataEntry)</li>
  <li>So, I want to route users to the system acroding to their user roles. Logically something like this.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if(userType == 'student'){
   router.push('/student')
  },
  if(userType == 'admin'){
   router.push('/admin')
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I achieve this? I'm new to vueJS and I have no idea where to put these if conditions.</p>
  
  <p>Here is my code <strong>Store.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue';
  import Vuex from 'Vuex';
  import axios from 'axios';
  import router from './main.js';
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
    state:{
  
      idToken:null,
      userId:null,
      userType:null,
      userName:null
  
    },
  
    mutations:{
  
      authUser(state,userData){
  
        state.idToken = userData.token,
        state.userId  = userData.id,
        state.userName = userData.userName,
        state.userType = userData.type
  
      },
  
      clearAuthData(state){
  
        state.idToken = null,
        state.userId = null,
        state.userName = null,
        state.userType = null
  
      }
  
  },
  
    actions:{
  
      signup({commit},authData){
        axios.post('http://localhost/laravel_back/public/api/register', authData)
          .then(res =&gt; {
            commit('authUser',{
            token:res.data.idToken,
            userId:res.data.localId
            })
            //dispatch('storeUser',authData)
          })
          .catch(error =&gt; console.log("ERROR COMES FROM ACTION SIGN UP",error))
      },
  
      login({commit},authData){
        axios.post('http://localhost/laravel_back/public/api/login',authData
  
        )
          .then(res =&gt; {
            console.log("Back-end Response",res);
  
            commit('authUser',{
              token:res.data[0].token,
              userName:res.data[1][0].fname,
              id:res.data[2].id,
              type:res.data[3][0].role_id
  
          })})
          .catch(error =&gt; console.log(error))
  
          //router.push('/student')
  
        },
      
  
  
  logout({commit}, {router}){
    commit('clearAuthData')
    router.replace('/')
  },
  
    },
    getters:{
      userId(state){
        return state.userId
  
      },
      userType(state){
        return state.userType
      },
      userName(state){
        return state.userName
      },
      returnToken: state =&gt; {
        return state.idToken
      }
  
    }
  });</code></pre>
  </div>
  </div>
  
  <strong>header.vue</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class="fluid-container" id="headerr"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col"&gt;
            &lt;h1&gt;Exams-portal&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="col form-group" v-if="!auth"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                &lt;input type="email" name="email" value="" v-model="email" class="form-control float-right"&gt;
              &lt;/div&gt;
  
              &lt;div class="col" &gt;
                &lt;input type="password" name="password" value="" v-model="password" class="form-control float-right"&gt;
              &lt;/div&gt;
  
              &lt;div class="col"&gt;
                &lt;button type="button" class="btn btn-primary " name="button" @click="onLogin"&gt;Login&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                &lt;router-link :to="{ path:'findYourAccount' }"&gt;Forgot password?&lt;/router-link&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="" v-if="auth" class="col-sm-6 form-group" &gt;
  
            &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                Logged as {{userName}}
                &lt;/div&gt;
  
              &lt;div class="col"&gt;
                &lt;button type="button"  class="btn btn-primary float-right" name="button" @click="onLogout"&gt;Logout&lt;/button&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
  
          &lt;/div&gt;
  
  
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { mapActions } from 'vuex';
    export default{
      data () {
        return {
          email: '',
          password: ''
        }
      },
      computed:{
        auth(){
          return this.$store.getters.isAuthenticated
        },
        userName(){
            return this.$store.getters.userName
          }
  
      },
      methods:{
        ...mapActions(["logout"]),
        onLogin () {
  
          const formData = {
            email: this.email,
            password: this.password,
            returnSecureToken:true
          }
          this.$store.dispatch('login',{
           email: this.email,
           password: this.password,
           //router: this.$router
         })
  
      },
      onLogout(){
        this.logout({ router: this.$router });
      }
      }
    }
  &lt;/script&gt;
  &lt;style scoped&gt;
  #headerr{
    color:white;
    background-color: #003459;
    padding: 10px;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>