Javascript 如果用户硬编码url，则保持用户登录状态

我正在尝试更新我的导航栏组件，以便根据用户是否登录来更改导航栏按钮

我将显示/隐藏布尔包含在我的数据中，如下所示：

data() {
    return {
        showDropdown: false,
    }
}

computed: {
    btnPressed: function() {
        if (sessionStorage.token != null) {
            return this.showDropdown = true
        }
    }
}

if (sessionStorage.getItem('token') != null) {
          return this.user = sessionStorage.getItem('user')
        }
if (sessionStorage.getItem('token') != null) {
          return this.showDropdown = true
        }

我有这样一个计算组件：

data() {
    return {
        showDropdown: false,
    }
}

computed: {
    btnPressed: function() {
        if (sessionStorage.token != null) {
            return this.showDropdown = true
        }
    }
}

if (sessionStorage.getItem('token') != null) {
          return this.user = sessionStorage.getItem('user')
        }
if (sessionStorage.getItem('token') != null) {
          return this.showDropdown = true
        }

我还通过navbar组件中的created（）钩子设置了一个eventBus，所以当用户从主页登录时，它会导致showDropdown变量切换为true

created() {
     eventBus.$on('btnPressed', (user) => {
         this.showDropdown = true
         this.user = user
         console.log('btn pressed')
     })
}

如果我从登录页面登录，它可以正常工作，但是如果我手动输入example.com/users，showDropdown会被重置，并且不会被设置，即使我仍然有我的令牌

编辑： 我的导航栏组件模板如下所示：

<template>
  <div id="app">
  <v-toolbar clipped-left>
    <v-menu>
      <v-toolbar-side-icon class="hidden-md-and-up" slot="activator" >
      </v-toolbar-side-icon>
      <v-list>
        <v-list-tile-title>test</v-list-tile-title>
      </v-list>
    </v-menu>
    <v-toolbar-title @click="$router.push('/')"><v-btn flat>Home</v-btn></v-toolbar-title>
    <v-spacer></v-spacer>
    <v-menu v-if="showDropdown" offset-y>
      <v-btn slot="activator" flat> {{ user }} </v-btn>
      <v-list>
        <v-list-tile @click="$router.push('/users')">Users</v-list-tile>
        <v-list-tile @click="">test3</v-list-tile>
        <v-list-tile @click="">Logout</v-list-tile>
      </v-list>
    </v-menu>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat disabled>Link Two</v-btn>
      <v-btn slot="activator" flat disabled>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  </div>
</template>

测试
家
{{user}}
使用者
测试3
注销
链接二
链接三

编辑2：

这也是我的App.vue模板的外观：

<template>
  <div id="app">
    <Navbar></Navbar>
    <transition name="fade">
    <router-view/>
    </transition>
  </div>
</template>

---

我以前遇到过的问题的解决方案是为bar按钮创建挂载属性，以便根据令牌的状态隐藏/显示它

 mounted(){
     eventBus.$on('btnPressed', (user) => {
             this.showDropdown = true
             this.user = user
             console.log('btn pressed')
         })
        }


 created(){
       if (sessionStorage.token != null) {
                return this.showDropdown = true
            }
    }

---

经过一点故障排除，我发现其中一个问题是语法应该是

sessionStorage.getItem（'token'）

，然后我需要在挂载的钩子中添加额外的检查，如下所示：

data() {
    return {
        showDropdown: false,
    }
}

computed: {
    btnPressed: function() {
        if (sessionStorage.token != null) {
            return this.showDropdown = true
        }
    }
}

if (sessionStorage.getItem('token') != null) {
          return this.user = sessionStorage.getItem('user')
        }
if (sessionStorage.getItem('token') != null) {
          return this.showDropdown = true
        }

---

看看这里。我会考虑切换到本地存储来避免这个问题，并用令牌、到期日期和盐加密字典。@ PaulthMax我使用LoalStand，我解释我的问题。令牌存储在本地存储器中，问题是在页面重新加载时让导航栏检查令牌否，您使用的是会话，其行为不同，用户手动干预可以重置。（

sessionStorage.token！=null

）如果我手动键入www.domain/users，页面会更改，按钮会消失，即使我的存储中仍然有token。好的，我想，您必须将组件提取出来，以便动态加载它。你能分享你的按钮条源代码吗。因此，我可以编辑我的答案。我包括了导航栏组件的模板，我有上面的安装、创建和计算方法。我还包括了我的App.vue模板的外观以及我放置导航栏的位置。让我们来看看。