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 相关文章推荐
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
微信小程序实现侧边栏分类
Oct 21 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 代码优化的42条建议 推荐
2009/09/25 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php遍历目录方法小结
2015/03/10 PHP
学习jquery之一
2007/04/27 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JS实现放烟花效果
2020/03/10 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python33 urllib2使用方法细节讲解
2013/12/03 Python
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
详解Python当中的字符串和编码
2015/04/25 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
python 动态绘制爱心的示例
2020/09/27 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
班组长竞聘书
2014/03/31 职场文书
社区志愿者培训方案
2014/06/10 职场文书
支部组织生活会方案
2014/06/10 职场文书