vue router+vuex实现首页登录验证判断逻辑


Posted in Javascript onMay 17, 2018

首页登录逻辑要求在页面上判断是否获取到登录token ,没有获取到则跳转到登录页。登录成功后,跳转到前一个页面。

1.vue router

路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next 。

to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子。

下面以工作中写的一个判断为为例子:

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子,如果不是,进行到下一个判断
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页,将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2. this.$router 与 this.$route   this.$router.push 与 this.$router.replace

在登录页完成登录请求后进行下面的操作

获取路径中存放前一个路径的参数 ,然后跳转到该页面

loginSuccess() {
   const { params: { back } } = this.$route;
   const route = 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不会新增记录,而是直接替换掉了这条路由记录。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
生成二维码方法汇总
Dec 26 Javascript
jquery中键盘事件小结
Feb 24 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
微信小程序自定义多选事件的实现代码
May 17 #Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 #Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
You might like
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PDO::setAttribute讲解
2019/01/29 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Django自定义认证方式用法示例
2017/06/23 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python对视频画框标记后保存的方法
2018/12/07 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
哈理工毕业生的求职信
2013/12/22 职场文书
小学新学期教师寄语
2014/01/18 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
骨干教师考核方案
2014/05/09 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
跑出一片天观后感
2015/06/08 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang