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

 更新时间:2018年09月13日 10:26:57   作者:ZCJ爱笑的菇凉  
这篇文章主要介绍了vue的全局变量和全局拦截请求器的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

做的产品证书管理系统使用的是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()
  }
})

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

相关文章

  • vue history 模式打包部署在域名的二级目录的配置指南

    vue history 模式打包部署在域名的二级目录的配置指南

    这篇文章主要介绍了vue history 模式打包部署在域名的二级目录的配置指南 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue项目中axios如何捕捉http状态码为401错误问题

    vue项目中axios如何捕捉http状态码为401错误问题

    这篇文章主要介绍了vue项目中axios如何捕捉http状态码为401错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 利用Vue Native构建移动应用的全过程记录

    利用Vue Native构建移动应用的全过程记录

    VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架m这篇文章主要给大家介绍了关于如何利用Vue Native构建移动应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-08-08
  • vue2.0 如何把子组件的数据传给父组件(推荐)

    vue2.0 如何把子组件的数据传给父组件(推荐)

    这篇文章主要介绍了vue2.0 如何把子组件的数据传给父组件,需要的朋友可以参考下
    2018-01-01
  • Vue大屏数据展示示例

    Vue大屏数据展示示例

    公司的大数据工作组就需要通过数据大屏展示一些处理过后有价值的信息,本文主要介绍了Vue大屏数据展示示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 分享vue里swiper的一些坑

    分享vue里swiper的一些坑

    这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题

    Vue报错:TypeError:Cannot create property '

    这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue-element-admin开发教程(v4.0.0之后)

    vue-element-admin开发教程(v4.0.0之后)

    由于vue-element-admin的架构再4.0.0版本后做了重构,整体结构上和之前的还是很相似的,但是也有些变化,本文就介绍vue-element-admin开发教程(v4.0.0之后),感兴趣的可以了解一下
    2022-04-04
  • vue实现tab切换的3种方式及切换保持数据状态

    vue实现tab切换的3种方式及切换保持数据状态

    这篇文章主要给大家介绍了关于vue实现tab切换的3种方式及切换保持数据状态的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue路由跳转了但界面不显示的问题及解决

    vue路由跳转了但界面不显示的问题及解决

    这篇文章主要介绍了vue路由跳转了但界面不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论