Navbar not updating on successful User Signin

I am building my first Vue-Cli 3 project with a Rails 6 Api as the backend.

I have a nav component that is supposed to update on successful user sign in, right now when a user signs in it redirects to the user dashboard but the nav stays as the logged nav view. It will successfully change when I force refresh the page.

Being so new to Vue this could be a small issue, however I am struggling to find any references on this issue.

I am using Axios Axios-Vue and JWTSessions to handle the tokens / sessions

here is my Navigation.vue component code:

<template>
  <div class="font-sans antialiased">
    <nav class="flex items-center justify-between flex-wrap bg-loadze-blue p-6 fixed w-full">
      <div class="flex items-center flex-no-shrink text-gray-900 mr-6">
        <span class="font-semibold text-xl tracking-tight text-white">Loadze.co</span>
      </div>
      <div class="block sm:hidden">
        <button @click="toggle" class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div :class="open ? 'block': 'hidden'" class="w-full flex-grow sm:flex sm:items-center sm:w-auto">
        <div class="text-sm sm:flex-grow">
          <router-link to="/home" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Home</router-link>
          <router-link to="/about" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">About</router-link>
          <router-link to="/features" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Features</router-link>
          <router-link to="/pricing" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Pricing</router-link>
          <router-link to="/contact" class="no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Contact Us</router-link>
        </div>
        <div>
          <router-link to="/signup" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Sign up</router-link>
          <router-link to="/signin" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="!signedIn()">Sign in</router-link>
          <a href="#" @click.prevent="signOut" class="text-sm no-underline block mt-4 sm:inline-block sm:mt-0 text-teal-lighter hover:text-white mr-4" v-if="signedIn()">Logout</a>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      open: false
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
    },
    setError (error, text) {
      this.error = (error.response && error.response.data && error.response.data.error) || text
    },
    signedIn () {
      return localStorage.signedIn
    },
    signOut () {
      this.$http.secured.delete('/signin')
        .then(response => {
          delete localStorage.csrf
          delete localStorage.signedIn
          this.$router.replace('/')
        })
        .catch(error => this.setError(error, 'Can not sign out'))
    }
  }
}
</script>

<style>

</style>

and this is the Signin.vue component (script the form code is long.. please let me know if you need to see it) code:

<script>
export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      error: ''
    }
  },
  created () {
    this.checkSignedIn()
  },
  updated () {
    this.checkSignedIn()
  },
  methods: {
    signin () {
      this.$http.plain.post('/signin', { email: this.email, password: this.password })
        .then(response => this.signinSuccessful(response))
        .catch(error => this.signinFailed(error))
    },
    signinSuccessful (response) {
      if (!response.data.csrf) {
        this.signinFailed(response)
        return
      }
      localStorage.scrf = response.data.csrf
      localStorage.signedIn = true
      this.error = ''
      this.$router.replace('/dashboard')
    },
    signinFailed (error) {
      this.error = (error.response && error.response.data && error.response.data.error) || ''
      delete localStorage.csrf
      delete localStorage.signedIn
    },
    checkSignedIn () {
      if (localStorage.signedIn) {
        this.$router.replace('/dashboard')
      }
    }
  }
}
</script>

Solution

You're using a function for your conditional display (v-if="!signedIn()") but the function returns nothing meaning nothing is reactively rendered within the template.

Try to add a new data property which can be updated on signin:

<template>
  ...
  <div class="text-sm sm:flex-grow">
    <router-link to="/home" v-if="!isSignedIn">Home</router-link>
    <router-link to="/about" v-if="!isSignedIn">About</router-link>
    <router-link to="/features" v-if="!isSignedIn">Features</router-link>
    <router-link to="/pricing" v-if="!isSignedIn">Pricing</router-link>
    <router-link to="/contact" v-if="!isSignedIn">Contact Us</router-link>
  </div>
  ...
</template>

<script>
export default {
  name: 'Signin',
  data () {
    return {
      email: '',
      password: '',
      error: '',
      isSignedIn: false // <= here
    }
  },
  //...
  methods: {
    signin () {
      this.$http.plain.post('/signin', { email: this.email, password: this.password })
        .then(response => {
          this.signinSuccessful(response)
          this.isSignedIn = true // <= and here
        }).catch(error => this.signinFailed(error))
    },
    //...
  }
}
</script>

Then in your logout's function, you can set the isSignedIn back to false.