我试图在用户从登录页面登录后“重新呈现”我的导航栏。我有一些导航链接会根据用户是否登录而显示。
现在,如果我能在localStorage上找到一个用户项,我将呈现这些用户项:
'
Navbar.vue
<script>
export default {
data() {
return {
notLoggedInDropDown: false,
loggedInDropDown: false,
logged: localStorage.getItem('user') == null ? false : true,
user : {}
}
},
methods: {
closeSession() {
localStorage.removeItem('user');
localStorage.removeItem('token');
this.logged = false;
this.user = {};
},
},
mounted() {
var user = JSON.parse(localStorage.getItem('user'));
this.user = user;
},
}
</script>
第一个月
Login.vue
methods: {
async signIn(){
try {
const data = await login(this.username, this.password)
localStorage.setItem('user', JSON.stringify(data.user))
localStorage.setItem('token', data.token)
this.$router.push('/')
} catch (error) {
this.error.status = true
this.error.message = "Username or password failed."
}
}
},
'
我试过使用mitt发送发射器,但navbar并不是登录页面的子组件。我也试过将记录的布尔值作为计算语句,但它仍然没有重新呈现。我知道它没有更新的原因是因为router.push方法不是React性的,但我不确定下一步该尝试什么。此外,我的应用目前没有使用Vuex。我可以很容易地集成到我的Vue应用程序中吗?欢迎任何帮助!
2条答案
按热度按时间3qpi33ja1#
我认为最好的方法是使用Vuex。
在vuex中创建一个变量,从
Login.vue
写入并通过getter将其导出到所有组件。从Navbar.vue
中,您应该在一个计算属性中获取vuex变量,并在有人登录时对其值更改做出React。否则,推荐的处理登录的方法是通过vue-router,你应该看看vue文档。
祝你好运!
9o685dep2#
我知道有三种解决方案可以用,一种不是用
vue-router
,而是用浏览器的功能,比如location.replace(url);
,二种是用emitting
从登录页面到应用程序,然后用prop
把信息提供给导航栏,三种是我通常喜欢用vuex
在组件之间获得共享存储。选项一是最简单和最快的,但是选项三使您的应用程序更健壮。