为了账号安全,请及时绑定邮箱和手机立即绑定

vue项目中判断是否登录如何作为公用函数?求指导!

vue项目中判断是否登录如何作为公用函数?求指导!

慕尼黑5688855 2019-11-03 09:59:45
用vue-cli基于ElementUI构建的项目。很多模块的很多动作需要先判断是否登录,如评论、点赞、收藏等。如果没有登录,就弹出登录框。请问如何在不同模块中调用一个公共函数达成这一需求。(目前的做法是每个页面都写一个判断函数,在点击前调用这个函数。这个函数通过一级一级的parent的refs来找到登录模块,然后将其显示)
查看完整描述

2 回答

?
开满天机

TA贡献1786条经验 获得超12个赞

个人做法大体思路应该是:把登录弹窗组件放在app.vue组件内,由vuex内的变量控制显示与否。每次需要校验是否已登录时调用vuex内的方法进行校验,如果未登录则设置控制弹窗的变量为true,登录弹窗便会弹出。
app.vue
//登录弹窗组件
src/store/state.js(state)
state={
isGoLogin=false,//控制弹窗组件是否显示的变量
}
src/store/mutations.js(mutations)
mutations={
//校验是否已登录
checkLogin(state){
//...
if(已登录){
returntrue
}
if(未登录){
state.isGoLogin=true;//登录弹窗显示
returnfalse
}
}
}
使用方法(假设现在要触发评论方法):
methods:{
comment(){
letisLogin=this.$store.commit("checkLogin");//校验是否已登录
if(isLogin===false)return;
//这里是评论操作...
}
}
写到这里说一下不好的地方。就是每次调用,调用的这一边都做下面这个操作,还是有繁琐的操作步骤。感觉上应该是还可以再优化,一时间没想出来,我要下班了,有想法的老哥可以给点建议。
letisLogin=this.$store.commit("checkLogin");//校验是否已登录
if(isLogin===false)return;
//...执行下一步操作
                            
查看完整回答
反对 回复 2019-11-03
  • 2 回答
  • 0 关注
  • 690 浏览
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信