如何用Vue显示检查localStorage键的按钮？

Question

当我注销时，我会删除令牌。下面是我如何检查令牌是否被删除：

  const isLoggedOut = () => {
    let token = window.localStorage.getItem('token')
    if (token === undefined || token === null || token.length === 0) {
      console.log("user is logged out")
      return true
    }
    else {
      console.log("user is logged in")
      return false
    }
  }

在导航栏中，如果用户登录，我希望Login按钮被隐藏。这就是导航条的样子：

  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <router-link class="navbar-brand" :to="{ name: 'Home' }">Home</router-link>
    <ul class="navbar-nav">
        <li class="nav-item">
            <router-link class="text-white" :to="{ name: 'Login' }" v-if="isLoggedOut">Login</router-link>
        </li>
        <li class="nav-item">
            <router-link class="text-white ml-2" :to="{ name: 'Register' }">Register</router-link>
        </li>
        <li class="nav-item">
            <router-link class="text-white ml-2" :to="{ name: 'Dashboard' }">Dashboard</router-link>
        </li>
        <li class="nav-item">
            <button class="text-white ml-2" @click="logOut">Logout</button>
        </li>
    </ul>
  </nav>

稍后编辑，这是没有样式的App.vue文件。我登录，登录按钮仍然出现在导航栏中。

<script setup>
  import { reactive,ref, computed } from 'vue'
  import { useRouter } from "vue-router"

  const router = useRouter()

  const token = ref(null);
  const setToken = (token) => {
    token.value = token;
    window.localStorage.setItem('token', token)
  } 
  const clearToken = () => {
    token.value = null;
    window.localStorage.removeItem('token')
  }

  const isLoggedOut = computed(() => token.value === null)

  const logOut = () => {
    clearToken()
    router.push({name:'Login'})
  }

</script>

<template>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <router-link class="navbar-brand" :to="{ name: 'Home' }">Home</router-link>
    <ul class="navbar-nav">

        <!-- Show Login button only if user is logged out -->
        <li class="nav-item">
            <router-link class="text-white" :to="{ name: 'Login' }" v-if="isLoggedOut">Login</router-link>
        </li>
        
        <li class="nav-item">
            <router-link class="text-white ml-2" :to="{ name: 'Register' }">Register</router-link>
        </li>
        <li class="nav-item">
            <router-link class="text-white ml-2" :to="{ name: 'Dashboard' }">Dashboard</router-link>
        </li>
        <li class="nav-item">
          <button class="text-white ml-2" @click="logOut">Logout</button>
        </li>
    </ul>
  </nav>
  <router-view/>
</template>

Answer 1

该按钮仍然是可见的，因为组件(在您的情况下是App.vue)没有重新加载，这意味着没有执行是否有令牌的检查，由于上面提到的window.localStorage不是反应性的，因此计算结果不会被更新。

克服这一问题的一种方法是使用存储(pinia/vuex/composable )和路由器挂钩(如beforeRouteEnter或全局One - beforeEach )。

您还可以尝试使localStorage像本例中的这里那样具有反应性。

这可能有点过火了。

只需确保您将令牌函数和操作移动到一个分离的文件中(甚至作为一个可组合文件)。

Answer 2

window.localStorage.getItem('token')不是反应性的。如果值发生变化，则不会通知您。

您可以通过内部状态管理它，然后通过内部状态管理本地存储，而不是从localStorage获得登录状态。

例如：

const token = ref(null);
const setToken = (value) => {
  token.value = value;
  window.localStorage.setItem('token', token)
} 
const clearToken = () => {
  token.value = null;
  window.localStorage.removeItem('token')
}
const isLoggedIn = computed(()=>token.value !== null)

然后可以使用isLoggedIn作为反应性(计算)值。

您可以将其存储在单独的auth.js中，并导出方法和令牌。

示例