Links.vue

<template>
  <ul class="nav nav-tabs">
    <li
      role="presentation"
      :class="{ active: $route.name === 'home' }"
    >
      <router-link to="/">
        Home
      </router-link>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'about' }"
    >
      <router-link to="/about">
        About
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensates' }">-->
    <!--<router-link to="/condensates">-->
    <!--Condensates-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
    <!--<router-link to="/browse">-->
    <!--Browse-->
    <!--</router-link>-->
    <!--</li>-->
    <li
      role="presentation"
      :class="{ active: $route.name === 'biomolecular' }"
    >
      <router-link to="/biomolecular">
        Biomolecular Condensates
      </router-link>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'synthetic' }"
    >
      <router-link to="/synthetic">
        Synthetic Condensates
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensate_example' }">-->
    <!--<router-link to="/condensate_example">-->
    <!--Condensate Example-->
    <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'protein_example' }">-->
    <!--<router-link to="/protein_example">-->
    <!--Protein Example-->
    <!--</router-link>-->
    <!--</li>-->
    <li
      role="presentation"
      :class="{ active: $route.name === 'statistics' }"
    >
      <router-link to="/statistics">
        Statistics
      </router-link>
    </li>
    <li
      role="presentation"
      :class="{ active: $route.name === 'encyclopedia' }"
    >
      <router-link to="/encyclopedia">
        Encyclopedia
      </router-link>
    </li>
    <li
      v-show="userData !== null && (userRole === 'Contributor' || userRole === 'Maintainer')"
      role="presentation"
      :class="{ active: $route.name === 'updateItems' }"
    >
      <router-link to="/updateItems">
        {{ userRole === 'Maintainer'? 'All Submitted Changes' : 'My Submitted Changes' }}
      </router-link>
    </li>
    <li
      v-show="userData !== null"
      role="presentation"
      :class="{ active: $route.name === 'profile' }"
    >
      <router-link to="/profile">
        Profile
      </router-link>
    </li>
    <li
      v-show="userData !== null"
      role="presentation"
    >
      <router-link
        to="/login"
        @click.native="signOut"
      >
        <span class="fa fa-sign-out" />
      </router-link>
    </li>
    <li
      v-show="userData === null"
      role="presentation"
      :class="{ active: $route.name === 'login' }"
    >
      <router-link to="/login">
        Login
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Links",
  data() {
    return {
      // userData: this.$store.getters['User/userData']
    };
  },
  computed: {
    userData: function () {
      return this.$store.getters["User/userData"];
    },
    userRole: function () {
      return this.$store.getters["User/userRole"];
    },
  },
  mounted: function () {
    const vm = this;

    // console.log(vm.userData)
    // console.log(this.$route.name)
    // if(vm.userData !== null) {
    //   vm.$router.push('/profile')
    // }
  },
  methods: {
    signOut() {
      const vm = this;
      window.localStorage.removeItem("jwt");
      window.localStorage.removeItem("userData");
      window.localStorage.removeItem("roleName");
      vm.$store.dispatch("User/logOut");
      vm.$router.push("/login");
    },
  },
};
</script>