详解给Vue2路由导航钩子和axios拦截器做个封装


Posted in Javascript onApril 10, 2018

1.写在前面

最近在学习Vue2,遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文。

2.具体需求

  1. 用户鉴权与重定向:使用Vue提供的路由导航钩子
  2. 请求数据序列化:使用axios提供的请求拦截器
  3. 接口报错信息处理:使用axios提供的响应拦截器

3.简单实现

3.1 路由导航钩子层面鉴权与重定向的封装

路由导航钩子所有配置均在router/index.js,这里是部分代码

import Vue from 'vue'
import Router from 'vue-router'
import { getUserData } from '@/script/localUserData'

const MyAddress = r => require.ensure([], () => r(require('@/views/MyAddress/MyAddress')), 'MyAddress')

Vue.use(Router)

const routes = [
 {
  path: '/profile/address',
  name: 'MyAddress',
  component: MyAddress,
  meta: {
   title: '我的地址',
   requireAuth: true
  }
 },
 // 更多...
]

const router = new Router({
 mode: 'history',
 routes
})

我们主要来看下面逻辑处理部分的代码

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
 // 路由进入下一个路由对象前,判断是否需要登陆
 // 在路由meta对象中由个requireAuth字段,只要此字段为true,必须做鉴权处理
 if (to.matched.some(res => res.meta.requireAuth)) {
  // userData为存储在本地的一些用户信息
  let userData = getUserData()
  // 未登录和已经登录的处理
  // getUserData方法处理后如果userData.token没有值就是undefined,下面直接判断
  if (userData.token === undefined) {
   // 执行到此处说明没有登录,君可按需处理之后再执行如下方法去登录页面
   // 我这里没有其他处理,直接去了登录页面
   next({
    path: '/login',
    query: {
     redirect: to.path
    }
   })
  } else {
   // 执行到说明本地存储有用户信息
   // 但是用户信息是否过期还是需要验证一下滴
   let overdueTime = userData.overdueTime
   let nowTime = +new Date
   // 登陆过期和未过期
   if (nowTime > overdueTime) {
    // 登录过期的处理,君可按需处理之后再执行如下方法去登录页面
    // 我这里没有其他处理,直接去了登录页面
    next({
     path: '/login',
     query: {
      redirect: to.path
     }
    })
   } else {
    next()
   }
  }
 } else {
  next()
 }
 if (to.path !== '/') {
  indexScrollTop = document.body.scrollTop
 }
 document.title = to.meta.title || document.title
})

router.afterEach(route => {
 if (route.path !== '/') {
  document.body.scrollTop = 0
 } else {
  Vue.nextTick(() => {
   document.body.scrollTop = indexScrollTop
  })
 }
})
export default router

至此,路由钩子层面的鉴权处理完毕,不过细心的你可能注意到:导航去登录页面调用的next方法里面有个query对象,携带了目标路由的地址,这是因为在登录成功后我们需要重定向到目标页面。

3.2 对axios拦截器封装

axios所有配置均在件script/getData.js文件,这里是本文件公共代码部分

```

import qs from 'qs'

import { getUserData } from '@/script/localUserData '

import router from '@/router '

import axios from 'axios'

import { AJAX_URL } from '@/config/index '

axios.defaults.baseURL = AJAX_URL

> axios请求拦截器代码

 ```
/**
 * 请求拦截器,请求发送之前做些事情
 */
axios.interceptors.request.use(
 config => {
  // POST || PUT || DELETE请求时先格式化data数据
  // 这里需要引入第三方模块qs
  if (
   config.method.toLocaleUpperCase() === 'POST' ||
   config.method.toLocaleUpperCase() === 'PUT' ||
   config.method.toLocaleUpperCase() === 'DELETE'
  ) {
   config.data = qs.stringify(config.data)
  }
  // 配置Authorization参数携带用户token
  let userData = getUserData()
  if (userData.token) {
   config.headers.Authorization = userData.token
  }
  return config
 },
 error => {
  // 此处应为弹窗显示具体错误信息,因为是练手项目,劣者省略此处
  // 君可自行写 || 引入第三方UI框架
  console.error(error)
  return Promise.reject(error)
 }
)

axios响应拦截器代码

/**
 * 响应拦截器,请求返回异常统一处理
 */
axios.interceptors.response.use(
 response => {
  // 这段代码很多场景下没用
  if (response.data && response.data.success === false) {
   // 根据实际情况的一些处理逻辑...
   return Promise.reject(response)
  }
  return response
 },
 error => {
  // 此处报错可能因素比较多
  // 1.需要授权处用户还未登录,因为路由段有验证是否登陆,此处理论上不会出现
  // 2.需要授权处用户登登录过期
  // 3.请求错误 4xx
  // 5.服务器错误 5xx
  // 关于鉴权失败,与后端约定状态码为500
  switch (error.response.status) {
   case 403:
    // 一些处理...
    break
   case 404:
    // 一些处理...
    break
   case 500:
    let userData = getUserData()
    if (userData.token === undefined) {
     // 此处为未登录处理
     // 一些处理之后...再去登录页面...
     // router.push({
     //  path: '/login'
     // })
    } else {
     let overdueTime = userData.overdueTime
     let nowTime = +new Date
     if (overdueTime && nowTime > overdueTime) {
      // 此处登录过期的处理
      // 一些处理之后...再去登录页面...
      // router.push({
      //  path: '/login'
      // })
     } else {
      // 极端情况,登录未过期,但是不知道哪儿错了
      // 按需处理吧...我暴力回到了首页
      router.push({
       path: '/'
      })
     }
    }
    break
   case 501:
    // 一些处理...
    break
   default:
    // 状态码辣么多,按需配置...
    break
  }
  return Promise.reject(error)
 }
)

想了解更多关于axios的信息?请移步 这里 。

这个封装很简单,面对复杂的业务肯定还需要更多的考量,但是对于一般的小项目或边缘业务也差不多够用了。最后希望这篇文章能对有需要的同学提供一些帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript针对DOM的应用分析(三)
Apr 15 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
JS如何监听div的resize事件详解
Dec 03 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
bing Map 在vue项目中的使用详解
Apr 09 #Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
node实现基于token的身份验证
Apr 09 #Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
javascript new fun的执行过程
2010/08/05 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
python迭代器常见用法实例分析
2019/11/22 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
服务质量承诺书
2014/03/27 职场文书
意向书范文
2014/03/31 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技