[聚合文章] Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

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

2.具体需求

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

3.简单实现

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

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

import Vue from 'vue'<br />import Router from 'vue-router'<br />import { getUserData } from '@/script/localUserData'<br /><br />const MyAddress = r => require.ensure([], () => r(require('@/views/MyAddress/MyAddress')), 'MyAddress')<br /><br />Vue.use(Router)<br /><br />const routes = [<br />  {<br />    path: '/profile/address',<br />    name: 'MyAddress',<br />    component: MyAddress,<br />    meta: {<br />      title: '我的地址',<br />      requireAuth: true<br />    }<br />  },<br />  // 更多...<br />]<br /><br />const router = new Router({<br />  mode: 'history',<br />  routes<br />})

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

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

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

2. 对axios拦截器封装

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

import qs from 'qs'<br />import { getUserData } from '@/script/localUserData'<br />import router from '@/router'<br />import axios from 'axios'<br />import { AJAX_URL } from '@/config/index'<br />axios.defaults.baseURL = AJAX_URL

axios请求拦截器代码

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

axios响应拦截器代码

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

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

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