Question

我有一个网站，在登录时我将登录的用户名放在localStorage上。所以这是在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');
  });
}

我使用我制作的AuthPlugin执行此操作：

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

在Header.vue上，每个页面上的组件，我在每个页面上显示的用户名表示他在线。

<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>

注销时我会在AuthPlugin

中销毁令牌和用户

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

我把App.vue上的标题comp放在每个页面上。

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

因此，当我注销时，我从localStorage中删除了authUser。我希望当我点击退出并重定向到“/”，这是登录组件，即要隐藏的标题。

这些是路线

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}}
]

现在，如果我点击退出，当我被重定向到登录时，标题就会消失，但是当我输入用户名并转到登录并进入网站时，标题仍然是隐藏的。

为什么隐藏标题？如果我输入浏览器控制台localStore.authUser并按Enter键，我会看到我用来登录的用户名。

请有人告诉我，在那个v-if中我做错了什么？或者请告诉我是否可以使用diff方法在注销时隐藏该标题。

Answer 1

可能的解决方法：

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

Answer 2

做到这一点的最佳方法似乎是在metarouter.js中放置一个元标记-

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

并在Vue模板中使用它-

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

Answer 3

您的Header组件正在观看其拥有的 username媒体资源，以便进行更改。实例化组件时，该值将从localStorage复制一次。

我的建议是让用户名（以及可选的用户）成为根Vue对象的属性，并在setUser函数中更新它。然后，您可以将用户名作为道具传递给Header组件，或者在Vue实例用户名更改时使用vm.$watch更新组件的username。

Answer 4

如果在App.vue中检查，你可以做一件事 -

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

数据：

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

}，

这将直接绑定标题。

使用v-if隐藏VueJS组件

4 个答案: