用户登录时如何更改导航栏?

Question

我正在使用带有vue的Laravel并使用JWT身份验证进行身份验证。我制作了一个导航栏，我想更改该栏的链接，以便在用户登录时更改为不同的链接。我已将 jwt 的令牌存储到本地存储，但我无法使链接工作。请帮忙，因为我是这些技术的新手。

我尝试使用事件总线实现它并能够更改链接，但是当我单击注销按钮时，它不会从本地存储中删除令牌项，也不会调用该函数。我想代码逻辑存在一些问题，但我无法弄清楚。

导航栏

<nav class="main_nav">
<input type="checkbox" id="nav_check" class="hidden">
<label for="nav_check" class="nav-btn">
<i></i>
</label>
<div class="logo">
<a href="#">SCRIPTICO</a>
</div>
<div class="nav-wrapper">
<ul>
<li v-if="auth == ''">
<router-link to="/login">Sign in</router-link>
</li>
<li v-if="auth ==''">
<router-link to="/register">Register</router-link>
</li>
<li v-if="auth !==''">
<router-link to="/userdetails">Dashboard</router-link>
</li>
<li v-if="auth !==''">
<router-link to="/" v-on:click="handleLogout()">Logout</router-link>
</li>
</ul>
</div>
</nav>

这就是我尝试过的

<script>
import EventBus from './EventBus'
export default {
data(){
return{
auth: '',
user: ''
}
},
methods:{
handleLogout() {
console.log('this is it')
window.localStorage.removeItem("usertoken");
this.$router.push({ path: "/" });
}
},
mounted(){
EventBus.$on('logged-in', status => {
this.auth = status
console.log(status)
})
}
}
</script>

事件总线 vue 文件

<script>
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus
</script>

我对行为的期望是，当用户未登录导航栏时，应显示注册和登录的链接，当用户登录时，链接应更改为仅注销。

Answer 1

您的方法不起作用，因为您将单击事件提供给

<router-link

尝试将此事件提供给某些<button>或<a>

像下面一样

<a href="javascript:void(0);" v-on:click='handleLogout()'>Logout<a>或一些按钮

<button v-on:click="handleLogout()">Logout<button>

希望有帮助