Vue利用路由钩子token过期后跳转到登录页的实例


Posted in Javascript onOctober 26, 2017

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫。

分为全局导航钩子,单个路由独享的钩子,组件内钩子。

三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next。

其中next有三个方法

(1)next(); //默认路由

(2)next(false); //阻止路由跳转

(3)next({path:'/'}); //阻止默认路由,跳转到指定路径

这里我使用了组件内钩子进行判断token过期后跳转到登录页,其他两种钩子可以去官网查看。

//路由前验证
  beforeRouteEnter(to, from, next) {
   let postdata = {
    meta: {
     client_version: "1.0",
     client_type: "1",
    },
    data: {
     access_token: $.cookie("authtoken").toString()
    }
   }

   $.ajax({
    url: urls.serchuser,
    type: 'POST',
    data: JSON.stringify(postdata)
   }).done(data => {
    data = JSON.parse(data);
    console.log(data);
    if(data.status == 10050) {
     next(false);
     location.href = 'login.html';
    }else{
     next();
    }
   })
  }

实现方法很简单,在路由前向服务器发送请求,如果返回的数据表明token过期则阻止默认跳转,否则就正常跳转。

以上这篇Vue利用路由钩子token过期后跳转到登录页的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 #Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 #Javascript
You might like
批量修改RAR文件注释的php代码
2010/11/20 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
浅析Python编写函数装饰器
2016/03/18 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
创意广告词
2014/03/17 职场文书
奠基仪式策划方案
2014/05/15 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers