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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
js和jquery中获取非行间样式
May 05 jQuery
ES6之模版字符串的具体使用
May 17 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
浅谈Vue的响应式原理
May 30 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
python实用代码片段收集贴
2015/06/03 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
高二地理教学反思
2014/01/24 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
导游词之青城山景区
2019/09/27 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript