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 相关文章推荐
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
大学军训感言
2014/01/10 职场文书
二年级体育教学反思
2014/01/15 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
村干部任职承诺书
2015/01/21 职场文书
财务负责人岗位职责
2015/02/03 职场文书
转正申请报告格式
2015/05/15 职场文书
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技