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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
document.createElement()用法
Mar 13 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
vue实现百度搜索功能
Dec 28 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
React 高阶组件HOC用法归纳
Jun 13 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中cookie的作用域
2008/03/27 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
Chrome Web App开发小结
2014/09/04 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
Django的Modelforms用法简介
2019/07/27 Python
详解如何减少python内存的消耗
2019/08/09 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
python中format函数如何使用
2020/06/22 Python
pandas apply多线程实现代码
2020/08/17 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
应届毕业生就业自荐信
2013/10/26 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js