时间戳

首页 > 解决方案 > 在登录页面Vue JS上隐藏注销导航按钮

firebase - 在登录页面Vue JS上隐藏注销导航按钮

问题描述

我正在使用 firebase 和 firebase 身份验证（电子邮件密码）构建一个简单的 VueJS Web 应用程序。身份验证部分效果很好，但是，我不想在登录屏幕（或注册屏幕）上的导航栏中有注销按钮。我在 loginScreen.vue 中设置了一个函数来检查用户是否登录（如果没有用户登录，则为空），所以它是：

        created () { 
        var user = firebase.auth().currentUser;
           if (user != null) {
                console.log('no null')
                // reference to #routerbtn .show
            } else {
                console.log('yes null')
                // reference to #routerbtn .hide
            }
          }

这个 console.log 输出只是为了检查它是否有效。但是我找不到引用<li>from navHeader 以将其隐藏在页面上的方法。导航在 navHeader.vue 中，通过<router-link>仅注销只是<li>这就是 navHeader.vue

<template>
<nav>
<ul>
    <li><router-link to="/home" exact>To Do</router-link></li>
    <li><router-link to="/done" exact>Done</router-link></li>
    <li><router-link to="/inprogress" exact>In Progress</router-link> 
</li>
    <li id="#routerbtn" v-on:click="logout">Log Out</li>
</ul>
</nav>
</template>

<script>
import firebase from 'firebase'

export default {

methods: {

    logout: function () {
    firebase.auth().signOut().then(() => {
        this.$router.replace('login')
    })
}
}
}

感谢您的任何建议，干杯！

标签： firebasevue.jsvuejs2

解决方案

在您创建的方法中更改为：

created () { 
  this.user = firebase.auth().currentUser || false;
}

还要确保user在您的data方法中。

然后在您的视图中检查用户。

<ul>
    ...
    <li v-if="user">Log Out</li>
    <li v-else>Register</li>
    ...
</ul>

随着您的继续，您希望将菜单抽象为一个组件，这样您就不会在每个页面中重复相同的代码。

推荐阅读