CODEWITHSUNDEEP
javascriptvue.jssingle-page-application
LukeR97
LukeR97

Reputation: 111

How to manage re-rendering a navigation on a SPA in vue js

I am building a SPA with the Vue.js framework. Essentially I have a template in App.vue which holds a navigation and then a router-view below it. When the user goes to login, I have a modal which pops up and sends a login request to my API.

The issue I am having is when the user logs in, I am not sure how I can re-render the navigation so that after a user has logged in, the login and register options are hidden. I understand that I could use a v-if="user" type approach, but I am not sure how I can pass back this 'user' variable back from the modal after a login has been made.

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/head_img.png">
      <nav>
        <ul>
          <li><router-link to="/games">All games</router-link></li>
          <li><router-link to="/">Home</router-link></li>
          <li><modal-login>Login</modal-login></li>
          <li><modal-register>Register</modal-register></li>
          <li v-if="user">Logout</li>
        </ul>
      </nav>
      <router-view></router-view>
  </div>
</template>

<script>
import ModalLogin from './components/ModalLogin.vue'
import ModalRegister from './components/ModalRegister.vue'

export default {
  name: 'app',
  components: {
    ModalLogin,
    ModalRegister
  }
}
</script>

Modal Example

<template>
    <div>
        <a href="/#register" @click.prevent="show">Register</a>
        <modal name="modal-register" @opened="opened">
            <form @submit.prevent="doRegister">
                <div class="form-group">
                    <label for="email" class="block">Email</label>
                    <input v-model="email" type="email" id="email" name="email" class="border" ref="email">
                </div>
                <div class="form-group">
                    <label for="password" class="block">Password</label>
                    <input v-model="password" type="password" id="password" name="password" class="border">
                </div>
                <div class="form-group">
                    <button type="submit">Register</button>
                </div>
            </form>
            <div class="form-group">
                <p>Already have an account? <a href="#" @click.prevent="showLogin">Login</a></p>
            </div>
        </modal>
    </div>
</template>

In my request I have a .then after the request so I can check that the request was a 201 status.

I would appreciate any help into what I could try or what I should be looking at to achieve this type of task.

Upvotes: 0

Views: 248

Answers (1)

Rijosh
Rijosh

Reputation: 1544

You need to set the user authentication status globally. Vuex can be used for this purpose.

Example code

const state = {
  isAuth: false
}

const mutations ={
  setAuth:(state,value)=>state.isAuth = value
}

const actions = {
  loginRequest:function({commit}){
    // perform login request
    commit('setAuth',true); // call this after you get the login response
  }
}

Inside the component add a computed function

computed:{
  isAuth:function(){
    return this.$store.state.isAuth;
  }
}

Now isAuth can use for handling the condition to hide the sections you need.

Upvotes: 1

Related Questions