当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue的全局变量和全局拦截请求器的示例代码

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

2018年09月23日  | 移动技术网IT编程  | 我要评论

百好汇,最新更新,folkqq0530se_b2

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网