vue router+vuex实现首页登录验证判断逻辑
首页登录逻辑要求在页面上判断是否获取到登录token,没有获取到则跳转到登录页。登录成功后,跳转到前一个页面。
1.vuerouter
路由判断首先我们想到的是router.beforeEach前置导航守卫,这个方法接受三个参数tofromnext。
to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子。
下面以工作中写的一个判断为为例子:
router.beforeEach(async(to,from,next)=>{ const{name,meta}=to; const{requireLogin}=meta; if(name==='login'){//如果是登录页则用next方法resolve掉这个钩子,如果不是,进行到下一个判断 returnnext(); } constneedLogin=requireLogin&&!store.getters.user.isLogin;//从store中读取是否获取了已登录的信息 if(needLogin){ returnnext({//如果没有则跳转到登录页,将当前路由路径放到参数中 name:'login', params:{back:to}, }); } returnnext(); });
2.this.$router与this.$route this.$router.push与this.$router.replace
在登录页完成登录请求后进行下面的操作
获取路径中存放前一个路径的参数,然后跳转到该页面
loginSuccess(){ const{params:{back}}=this.$route; constroute=back||{name:'home'}; const{name,params,query}=route; this.$router.replace({name,params,query}); },
在上面这段代码中出现了两个我们经常混淆的概念:
我们知道this.$router是router实例,可以用来直接访问路由。我们称router配置中每一个对象为一个路由记录,this.$route是暴露出来用来访问每个路由记录的。因此我们获取参数时使用的是this.$route跳转路由时使用的是道this.$router。
上端代码中我们使用了replace而不是push来跳转路由,这两者的区别是会不会在history中产生记录。replace不会新增记录,而是直接替换掉了这条路由记录。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。