Update navbar login/logout button

I have an app with Vue.js frontend and Django Rest Framework at the back. I use DRF for registration/ login/ logout. So in my Navbar I have:

<a v-if="requestUser" class="btn btn-danger" href="/accounts/logout/" >Se deconnecter</a>
<a v-else class="btn btn-primary" href="/accounts/login/" >Se connecter</a>

And in my <script>:

data() {
    return {
      requestUser: null,              
    };
  },
  created() {
    this.setRequestUser();        
  },  
  methods: {
    setRequestUser() {
      this.requestUser = window.localStorage.getItem("username"); }         
    },

But because the method setRequestUser() is called on created (), my login/logout buttons are not updated after logging in/out and I have to refresh the page to do so.

I tried with beforeCreate () but couldn’t find a proper way to do it. Maybe with a watcher or a computed property ?

When a user logs in/out, assuming by clicking a button to send a REST request, add a click handler to the button to call a method to call ‘setRequestUser()’ . Up to you what the logic/functionality of ‘setRequestUser()’ is based on if the user is logging in or logging out.

If you need to wait until a successful REST response before updating the buttons, then call the ‘set’ method there.

No it’s not through REST, the button redirects me to Django login page.
Maybe one solution is to redirect @click to the Django login page "http://127.0.0.1:8000/accounts/login/" and at the same time call a method that will switch a “logged” state.
How can that be achieved?

If you have access to a login API in the Django server, I would suggest bypassing the Django login page and building your own Vue login page.

Possibly you are using localStorage (which I have read about but not really used) because you cannot bypass Django, and the Django login is writing to localStorage.

<button v-if="isLoggedIn" class="btn btn-danger"
 v-on:click="logout" >Se deconnecter</button>
<button v-else class="btn btn-primary"
 v-on:click="login" >Se connecter</button>
computed: {
  isLoggedIn() {
    return window.localStorage.getItem("username");
  }
},
methods: {
  login() {
    window.location.replace("http://127.0.0.1:8000/accounts/login/")
   //  Assuming Django writes username to localStorage
  },
  logout() {
    // Remove username from localStorage
  }
}

Not sure if everything is written totally correctly without testing, but hopefully gives you some ideas. I changed some names, but obviously use what works for you. Feel free to reply back.

1 Like

I will definitely give it a try tomorrow. Thanks Mindful Dev

I tried and It works as it should; I have access to an API login endpoint and I will investigate it in the future. This solution is not the smoothest for a SPA but it does the job for now :ok_hand:

computed: {
    isLoggedIn() {      
      return window.localStorage.getItem("username");      
    }
  },   
  methods: {
    login() {      
      window.location.replace("http://127.0.0.1:8000/accounts/login/")    
    },
    logout() {
      window.localStorage.removeItem("username");
      window.location.replace("http://127.0.0.1:8000/")      
    },