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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
vue实现简单的日历效果
Sep 24 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
浅析Python基础-流程控制
2016/03/18 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
PyQt实现计数器的方法示例
2021/01/18 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
学生鉴定评语大全
2014/05/05 职场文书
协会周年庆活动方案
2014/08/26 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
校长新学期致辞
2015/07/30 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript