Vue+axios 实现http拦截及路由拦截实例


Posted in Javascript onApril 25, 2017

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获.

基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了.

技术栈

  1. vue2.0
  2. vue-router
  3. axios

拦截器

首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多.

这个项目我引入了element ui框架,所以我是结合element中loading和message组件来处理的.我们可以单独建立一个http的js文件处理axios,再到main.js中引入.

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
 return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载失败'
 })
 return Promise.reject(error)
})

export default axios

这样我们就统一处理了http请求和响应的拦截.当然我们可以根据具体的业务要求更改拦截中的处理.

路由拦截

我们可以通过路由拦截做什么?我认为最主要的便是对权限的控制,比如有的页面需要登录了才能进入,有些页面不同身份渲染不同.接下来简单的讲一下登录拦截.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
 routes: [
 {
  path: '/',
  /*
  * 按需加载 
  */
  component: (resolve) => {
  require(['../components/Home'], resolve)
  }
 }, {
  path: '/record',
  name: 'record',
  component: (resolve) => {
  require(['../components/Record'], resolve)
  }
 }, {
  path: '/Register',
  name: 'Register',
  component: (resolve) => {
  require(['../components/Register'], resolve)
  }
 }, {
  path: '/Luck',
  name: 'Luck', 
  // 需要登录才能进入的页面可以增加一个meta属性
  meta: { 
  requireAuth: true
  },
  component: (resolve) => {
  require(['../components/luck28/Luck'], resolve)
  }
 }
 ]
})
// 判断是否需要登录权限 以及是否登录
router.beforeEach((to, from, next) => {
 if (to.matched.some(res => res.meta.requireAuth)) {// 判断是否需要登录权限
 if (localStorage.getItem('username')) {// 判断是否登录
  next()
 } else {// 没登录则跳转到登录界面
  next({
  path: '/Register',
  query: {redirect: to.fullPath}
  })
 }
 } else {
 next()
 }
})

export default router

这样就做好了登录拦截.我们只需在main.js中引入router就可以了.

实现权限的控制我们还可以通过Vuex来实现,但是如果是小型项目就没必要引入Vuex了.

以上是我做项目过程中的一些收获,由于入Vue的坑也才两月不到,有些地方可能有不足之处,欢迎大家指正,我会悉心听取.也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
微信小程序 video组件详解
Oct 25 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 Javascript
vuejs如何配置less
Apr 25 #Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
微信小程序中显示html格式内容的方法
Apr 25 #Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 #Javascript
详解Vue 动态添加模板的几种方法
Apr 25 #Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 #Javascript
基于Vue实现timepicker
Apr 25 #Javascript
You might like
php抓取https的内容的代码
2010/04/06 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
python文件排序的方法总结
2020/09/13 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
婚礼主持词
2014/03/13 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
新学期主题班会
2015/08/17 职场文书
小学毕业教师寄语
2019/06/21 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL