1.写在前面
近来在进修Vue2，碰到有些页面要求数据须要用户登录权限、服务器相应不符预期的题目，然则总不能每一个页面都做零丁处置惩罚吧，因而想到axios供应了拦截器这个好东西，再因而就涌现了本文。
2.详细需求
- 用户鉴权与重定向：运用Vue供应的路由导航钩子
- 要求数据序列化：运用axios供应的要求拦截器
- 接口报错信息处置惩罚：运用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的信息？请移步
这里。
这个封装很简朴，面临庞杂的营业一定还须要更多的考量，然则关于平常的小项目或边沿营业也差不多够用了。末了愿望这篇文章能对有须要的同砚供应一些协助。
