详解给Vue2路由导航钩子和axios拦截器做个封装-创新互联

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
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。