如何在Vue.js中根据浏览器存储的Token显示元素？

你可以通过**响应式状态结合Vue的条件渲染指令v-if**来实现需求，具体步骤如下：

1. 定义响应式状态并检查Token #

在组件的data中添加一个hasToken变量，用于标识localStorage中是否存在有效Token，同时在组件挂载时完成Token检查：

<script>
export default {
  name: "app",
  components: {},
  data() {
    return {
      hasToken: false
    };
  },
  mounted() {
    this.checkToken();
  },
  methods: {
    checkToken() {
      const token = localStorage.getItem("token");
      // 判断Token是否存在且不为空值
      this.hasToken = !!token;
    }
  }
};
</script>

2. 模板中使用条件渲染 #

用v-if="hasToken"包裹需要显示的<div>，只有当hasToken为true时，该元素才会被渲染：

<template>
  <div id="app">
    <!-- 仅存在Token时显示 -->
    <div v-if="hasToken">
      <h4>hello</h4>
    </div>
  </div>
</template>

可选优化 #

如果你的应用有登录/登出操作，在操作完成后调用checkToken()方法，可以实时更新hasToken状态，保证视图同步响应Token的变化。

内容的提问来源于stack exchange，提问作者jibzy