Issue when trying to show logout button only to logged in user in Vuejs?


NavBar.vue

<template>
  <div class="hello">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
      <div class="container-fluid">
        <router-link to="/Home" class="navbar-brand">Home</router-link>
        <router-link to="/Posts" class="navbar-brand">Posts</router-link>
        <div class="nav-item" v-if="loggedIn">
          <a href="#" class="nav-link" @click="setLogin()">Logout</a>
        </div>

        <div v-else>
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
              <router-link to="/Register" class="nav-link"
                >Register</router-link
              >
            </li>
            <li class="nav-item">
              <router-link to="/Login" class="nav-link" @click="setLogin()"
                >Login</router-link
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "NavBar",
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
      loggedIn: "loggedIn",
    }),
  },
  methods: {
    ...mapActions({
      setLogin: "setLogin",
    }),
  },
  // computed: {
  //   isLoggedIn: function() {
  //     return this.$store.getters.isAuthenticated;
  //   },
  // },
  // methods: {
  //   async logout() {
  //     await this.$store.dispatch("LogOut");
  //     this.$router.push("/Login");
  //   },
  // },
};
</script>
store--index.js

import Vuex from "vuex";
import Vue from "vue";
import createPersistedState from "vuex-persistedstate";
import auth from "./modules/auth";

// Load Vuex
Vue.use(Vuex);

// Create store
export default new Vuex.Store({
  modules: {
    auth,
  },
  plugins: [createPersistedState()],
});
store--modules--auth.js

const state = {
  logged: false,
  accessToken: false,
};

const getters = {
  loggedIn(state) {
    return state.logged || false
  },
  isAuthenticated: (state) => !!state.user,
  StatePosts: (state) => state.posts,
  StateUser: (state) => state.user,
};

const actions = {
  setLogin({ commit }) {
    commit('set_login')
  },
};

const mutations = {
  set_login(state) {
    state.logged = !state.logged
  },
};

export default {
  state,
  getters,
  mutations,
  actions
};

In the NavBar i have home, login, register. I have used vuex store to identify between registered and guest user.

Even after user is logged with credentials. The navBar remains same. Where logout option is not reflecting. But in my case I want to show the logout option only when user is loggedin successfully. Can you please suggest me what’s wrong with the below code. and what’s stopping me in proceeding further.

I have gone through the reference
Show Logout if user is already logged in Vuejs?

I can provide more if you need more info.

Thanks

Source: Vue – Stack Overflow

November 27, 2021
Category : News
Tags: javascript | Vue.js | vuex

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.