vue.js - 用户使用 token 身份验证登录后如何隐藏登录路由导航元素？

Question

登录时，我使用 localStorage.setItem('token', 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>

我认为我需要检查本地存储中是否有存储的 token ，如果有则隐藏路由。

Answer 1

您可以在组件中定义一个计算属性，例如isLoggedIn，它返回一个boolean值。

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>