CODEWITHSUNDEEP
vue.js
user6385799
user6385799

Reputation:

Hide a VueJS component with v-if

I have a website and on login I put on localStorage the username from the login. So this is on Login.Vue

login() {
  axios.post('/login', this.user)
  .then((response) => {
    alertify.set('notifier','delay', 3);
    alertify.success("Success! You are now logged in.");

    axios.get("/user", this.user)
    .then((response) => {
      this.$router.push('/home');
      AuthPlugin.setUser(this.user.username);
    })
  })
  .catch(function (error) {
    alertify.set('notifier','delay', 0);
    alertify.error('Invalid User');
  });
}

I do that using a AuthPlugin made by me that does this:

setUser(user) {
    localStorage.setItem('authUser', user);
}

On Header.vue, the component that is on each page, I have the username showing up on each page saying that he is online.

<template>
    <div id="header-bar" v-if="!username">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded p-0 fixed-top">
        <a href="#">Your are online {{username}}</a>
        <a href="#"  @click="logout">Log out</a>
        </nav>
    </div>
</template>
<script>
  import AuthPlugin from '../../plugin/Auth.js';
  import axios from 'axios';
    export default {
        data() {
            return {
                users: {},
                username: localStorage.authUser
            }
        },
        methods: {
          logout() {
            AuthPlugin.destroyToken();
                AuthPlugin.destroyUser();
                this.$router.push('/');
          },
          getUsers() {
                axios.get("/user")
                  .then((response) => {
                        this.users = response;
                  })
          }
       }
    }
</script>

Here on logout I destroy the token and user in AuthPlugin

destroyToken() {
    localStorage.removeItem('token');
    localStorage.removeItem('authTokenExpiration');
},
destroyUser() {
    localStorage.removeItem('authUser');
}

I put the header comp on App.vue to be on each page.

<template>
    <div>
        <app-header></app-header>
        <router-view></router-view>
    </div>
</template>

So when I do logout I remove authUser from localStorage. I want when I click on logout and get redirected to "/", which is login component, that header to be hidden.

These are the routes

export const routes = [
  {path: '/', component: Login},
  {path: '/home', component: Home, meta: {requiresAuth: true}},
  {path: '/events', component: Events, meta: {requiresAuth: true}},
  {path: '/events/new-event', component: NewEvent, meta: {requiresAuth: true}},
  {path: '/events/edit-event/:id', component: EditEvent, meta: {requiresAuth: true}}
]

Right now if I click on logout, when I get redirected to login the header is gone, but when I enter the username and pass to login and enter to the website the header is still hidden.

Why the header is hidden? If I type in browser console localStore.authUser and hit enter I see the username that I used to log in.

Please someone tell, what I did wrong in that v-if? Or please tell if I can hide that header on logout with a diff method.

Upvotes: 1

Views: 4183

Answers (4)

Adarsh Srivastava
Adarsh Srivastava

Reputation: 558

The best way to do so seems to be this put a meta tag in router.js - 

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { hideNavigation: true }
    }
  ]
})

and use this in the Vue template - 

<navigation v-if="!$route.meta.hideNavigation" />

Upvotes: 3

Kumar_14
Kumar_14

Reputation: 584

You can do one thing put v-if check in App.vue:

<template>
    <div>
        <app-header v-if="!username"></app-header>
        <router-view></router-view>
    </div>
</template>

And data:

data() {
       return {
         username: localStorage.authUser
       }

},

This will bind the header directly.

Upvotes: 0

Georgi Antonov
Georgi Antonov

Reputation: 1641

Possible work around:

<div id="header-bar" v-if="!username && !$route.path === '/'">

Upvotes: 1

Botje
Botje

Reputation: 30807

Your Header component is watching its own username property for changes. When you instantiate the component, the value is copied from localStorage once.

My suggestion is to make the username (and optionally the user) a property of your root Vue object and update it in your setUser function. You can then either pass the username as a prop to the Header component, or use vm.$watch to update the component's username when the Vue instance username changes.

Upvotes: 2

Related Questions