Vue.js 如何在用户使用令牌身份验证登录后隐藏登录路由导航元素？

登录时，我使用

localStorage.setItem（'token'，token）将令牌保存在本地存储器中

但是现在我想隐藏导致登录和注册路径的导航元素。以下是我的路线：

<template>
    <div class="nav-header">
        <div class="wrapper">
            <ul class='nav-ul'>
                <router-link to="/" tag='li' active-class='active' exact><li><a>Home</a></li></router-link>
                <router-link to="/signup" tag='li' active-class='active' exact><li><a>Sign Up</a></li></router-link>
                <router-link to="/signin" tag='li' active-class='active' exact><li><a>Sign In</a></li></router-link>
            </ul>
        </div>
    </div>
</template>

家
报名
登录

---

我假设我需要检查我的本地存储中是否有存储的令牌，如果有，则隐藏路由。任何提示和指针都将不胜感激。

您可以在组件中定义

computed

属性，例如，

isLoggedIn

返回

布尔值

computed: {
  isLoggedIn() {
    return !!window.localStorage.getItem('token')
  }
}

然后，您可以在要隐藏的路由中使用
v-if
指令

<template>
    <div class="nav-header">
        <div class="wrapper">
            <ul class='nav-ul'>
                <router-link to="/" tag='li' active-class='active' exact><li><a>Home</a></li></router-link>
                <router-link to="/signup" v-if="!isLoggedIn" tag='li' active-class='active' exact><li><a>Sign Up</a></li></router-link>
                <router-link to="/signin" v-if="!isLoggedIn" tag='li' active-class='active' exact><li><a>Sign In</a></li></router-link>
            </ul>
        </div>
    </div>
</template>



家
报名
登录

您是否正在使用
vuex
？不，我打算在掌握了基本知识后再检查一下。谢谢，这正是我想要做的。