vue的全局变量和全局拦截请求器的示例代码


Posted in Javascript onSeptember 13, 2018

做的产品证书管理系统使用的是VueJs和ElementUI,现将遇到的一些知识点记录一下。

VUe全局变量的实现

全局变量专用模块Global.vue是以一个特定模块来组织管理全局变量,需要引用的地方导入该模块即可。使用方法如下:
将全局变量模块挂载到Vue.prototype里,在程序入口的main.js里加下面代码:

import Global from '../components/Global.vue'
Vue.prototype.global = Global

挂载后,在需要引用全局变量的模块时,不需要再导入全局变量模块,直接用this引用即可。 如:this.global.notifySuccess()

Vue的全局请求拦截器

在全局变量专用模块Global.vue中设置全局Vue请求拦截器,以在全局拦截器中添加请求超时的方法为例,若请求超时则取消此次请求,并提示用户。请求超时设置通过拦截器Vue.http.interceptors实现具体代码如下

Vue.http.interceptors.push((request,next) => {
  let timeout
  // 如果某个请求设置了_timeout,那么超过该时间,该终端会(abort)请求,并执行请求设置的钩子函数onTimeout方法,不会执行then方法。
  if (request._timeout) {
   timeout = setTimeout(() =>{
    if (request.onTimeout) {
     request.onTimeout(request)
     request.abort()
     }
    }, request._timeout)
  }
  next((response) => {
   clearTimeout(timeout)
   return response
   })
 })

当页面中用到vue-resource请求的地方设置如下即可:

this.$http.get('url',{
    params:{.......},
    ......
    _timeout:3000,
    onTimeout: (request) => {
      alert("请求超时");
    }
  }).then((response)=>{
});

Vue的全局守卫

全局路由守卫是指在路由跳转时对登录状态进行检查。可以使用router.beforeEach注册一个全局前置守卫:

const router = new VueRouter({…})
Router.beforeEach((to,from,next)=> { …})

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫resolve完之前一直处于等待中。每个守卫方法接收三个参数:

  • to:Route即将要进入的目标,即路由对象;
  • from:Route当前导航正要离开的路由;
  • next:Function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

使用实例如下:

// 全局路由守卫,路由时检查用户是否登录,若无登录信息,指向登录界面
router.beforeEach((to, from, next) => {
  const nextRoute = ['AdminIndex','系统设置', '产品管理', '客户管理', '证书管理', '日志管理']
  if (nextRoute.indexOf(to.name)>= 0) {
    if (sessionStorage.getItem('username')){
      next()
    } else {
      window.location.replace('/login.html')
    }
  } else {
   next()
  }
})

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

Javascript 相关文章推荐
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
vue interceptor 使用教程实例详解
Sep 13 #Javascript
Vue点击切换颜色的方法
Sep 13 #Javascript
node中的cookie的具体使用
Sep 13 #Javascript
vue动态改变背景图片demo分享
Sep 13 #Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 #Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
python实现杨辉三角思路
2017/07/14 Python
python先序遍历二叉树问题
2017/11/10 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
实例讲解python中的协程
2018/10/08 Python
实例详解Python模块decimal
2019/06/26 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
医学生自我鉴定范文
2013/11/08 职场文书
校园安全标语
2014/06/07 职场文书
离婚协议书范本样本
2014/08/19 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
色戒观后感
2015/06/12 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python