CODEWITHSUNDEEP
javascriptvue.js
Nick
Nick

Reputation: 236

Keep user logged in state if user hard codes url

I am trying to update my navbar component so that bar buttons change based on if a user is signed in or not.

I included the show/hide bool in my data like this:

data() {
    return {
        showDropdown: false,
    }
}

And I have a computed component set up like this:

computed: {
    btnPressed: function() {
        if (sessionStorage.token != null) {
            return this.showDropdown = true
        }
    }
}

I also have an eventBus set up from the created() hook in the navbar component so what when user logs in from the home page, it causes the showDropdown variable to switch to true

created() {
     eventBus.$on('btnPressed', (user) => {
         this.showDropdown = true
         this.user = user
         console.log('btn pressed')
     })
}

If I log in from the login page, it works fine but then if I manually type in example.com/users, showDropdown gets reset and doesn't get set back even though I still have my token.

EDIT: My navbar component template is as follows:

<template>
  <div id="app">
  <v-toolbar clipped-left>
    <v-menu>
      <v-toolbar-side-icon class="hidden-md-and-up" slot="activator" >
      </v-toolbar-side-icon>
      <v-list>
        <v-list-tile-title>test</v-list-tile-title>
      </v-list>
    </v-menu>
    <v-toolbar-title @click="$router.push('/')"><v-btn flat>Home</v-btn></v-toolbar-title>
    <v-spacer></v-spacer>
    <v-menu v-if="showDropdown" offset-y>
      <v-btn slot="activator" flat> {{ user }} </v-btn>
      <v-list>
        <v-list-tile @click="$router.push('/users')">Users</v-list-tile>
        <v-list-tile @click="">test3</v-list-tile>
        <v-list-tile @click="">Logout</v-list-tile>
      </v-list>
    </v-menu>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat disabled>Link Two</v-btn>
      <v-btn slot="activator" flat disabled>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  </div>
</template>

EDIT 2:

This is what my App.vue template looks like as well:

<template>
  <div id="app">
    <Navbar></Navbar>
    <transition name="fade">
    <router-view/>
    </transition>
  </div>
</template>

Upvotes: 3

Views: 78

Answers (2)

Nick
Nick

Reputation: 236

After a little bit of troubleshooting, I found one of the issues was that the syntax should be sessionStorage.getItem('token') and then I needed to put additional checks in the mounted hook like this:

if (sessionStorage.getItem('token') != null) {
          return this.user = sessionStorage.getItem('user')
        }
if (sessionStorage.getItem('token') != null) {
          return this.showDropdown = true
        }

Upvotes: 0

Precious Okwu
Precious Okwu

Reputation: 450

The solution to your problem as i have experienced such before is to create mounted property for the bar button so that it is hidden/shown depending on the state of the token

 mounted(){
     eventBus.$on('btnPressed', (user) => {
             this.showDropdown = true
             this.user = user
             console.log('btn pressed')
         })
        }


 created(){
       if (sessionStorage.token != null) {
                return this.showDropdown = true
            }
    }

Upvotes: 1

Related Questions