我第一次使用Vue JS,我有一个导航栏,显示两个按钮'Login'和'Sign Up',第三个'Logout',除非用户登录,否则不会显示。
我将这些按钮包裹在<template v-if="authenticated">
和<template v-else>
的登录表单中,注册表单是一个简单的Bootstrap 4模式
我切换authenticated
变量的方式是这样的
data: function() {
return {
authenticated: false
}
},
methods: {
logout: function() {
this.$session.destroy()
}
},
created() {
this.authenticated = this.$session.exists()
},
我的导航栏位于一个单独的组件中,我的登录和注册表单各自采用不同的模式。
<template v-if="authenticated">
<li class="nav-item">
<a href="#" v-on:click="logout" class="nav-link">تسجيل الخروج</a>
</li>
</template>
<template v-else>
<li class="nav-item">
<a class="nav-link" data-target="#signup" data-toggle="modal" href="#signup">إنشاء حساب</a>
</li>
<li class="nav-item">
<a class="nav-link" data-target="#login" data-toggle="modal" href="#login">دخول</a>
</li>
</template>
虽然当我记录authenticated
时它会改变。
更改此代码:
methods: {
logout: function() {
this.$session.destroy()
}
}
对此:
methods: {
logout: function() {
this.$session.destroy();
this.authenticated = false;
}
}
这样你的authenticated
变量就知道你已经注销了。除此之外,您的代码应该可行。