[Vuejs]-Vue + Laravel SPA project – How can I hide login and register router-links in navbar right after login?

by

0👍

As your code is about user login and logout and maybe there are some codes related to the back-end part of your app that do the login-logout process, I tried to simulate the process with clicking login and logout buttons. I mean that by clicking that buttons I called the functions from user.js file and ignore the process of login or register. here is the code of "user.js":

user.js:

export default {
    hasToken() {
        const storeToken = localStorage.getItem('token');

        if (storeToken) {
            return true;
        }
        return false;
    },

    loggedIn() {
        return this.hasToken();
    },

    logOut() {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
    },

    /* I created this method to simulate the login of user. maybe you set "token" in other parts of your code. */
    login() {
        console.log("logged in");
        localStorage.setItem("token", "my value");
    }
}

And here is the code of navigation that you could import in App.vue.

TheNavigation.vue:

<template>
  <header>
    <nav>
      <div class="container">
        <router-link to="/" class="routerLink"><h1>Proiect Licenta</h1></router-link>

        <div class="menu">
          <router-link to="/buy">Buy Crypto</router-link>
          <router-link to="/market">Market</router-link>
          <router-link to="/about">About</router-link>
          <router-link to="/contact">Contact</router-link>
          <router-link v-if="!switchData" to="/signup">Signup</router-link>
          <router-link @click.native="loginMethod" v-if="!switchData" to="/login">Login</router-link>
          <button mode="flat" v-if="switchData" @click="logout">Logout</button>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
/* import user.js from your own address */
import User from '../helper/user.js';

export default {
  name: "TheNavigation",
  data() {
    return {
      switchData: false
    }
  },
  methods: {
    logout() {
      User.logOut()
      /* you should call "checkLogged" method after logout or login or signup to check the state of "local-storage" each time */
      this.checkLogged();

    },
    checkLogged() {
      /* instead of returning "true" or "false", change the value of "switchData" to benefit from Vue "reactivity"  */
      if(User.loggedIn()) {
        this.switchData = true;
      } else {
        this.switchData = false;
      }
    },
    loginMethod() {
      User.login();
      /* you should call "checkLogged" method after logout or login or signup to check the state of "local-storage" each time */
      this.checkLogged();
    }
  }
  // computed: {
  //   checkLogged() {
  //     if(User.loggedIn()) {
  //       return true;
  //     }
  //     return false;
  //   },
  // }
}
</script>

The main change in my approach from what you did is that I converted checkLogged() from a computed property to a Vue method and call it after login or logout. So Vue can check the local-storage each time and switch the buttons and links accordingly. Also you can test it in this code sand-box.

Leave a comment