伏龙阁资源网

vue的全局变量和全局拦截请求器的示例代码
站长资源 2024/11/27 佚名
2 0

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

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接