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 页面自动加载函数(兼容多浏览器)
May 18 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
javascript实现移动端红包雨页面
Jun 23 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
如何用php获取文件名后缀
2013/06/09 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
python基础教程之循环介绍
2014/08/29 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
心理健康日活动总结
2014/05/08 职场文书
会议欢迎标语
2014/06/30 职场文书
小学综合实践活动总结
2014/07/07 职场文书
婚宴新郎致辞
2015/07/28 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
python入门学习关于for else的特殊特性讲解
2021/11/20 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL