1.写在前面
最近在学习Vue2，遇到有些页面请求数据需要用户登录权限、服务器响应不符预期的问题，但是总不能每个页面都做单独处理吧，于是想到axios提供了拦截器这个好东西，再于是就出现了本文。
2.具体需求
3.简单实现
3.1 路由导航钩子层面鉴权与重定向的封装
路由导航钩子所有配置均在router/index.js，这里是部分代码
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
})
我们主要来看下面逻辑处理部分的代码
{
// 路由进入下一个路由对象前，判断是否需要登陆
// 在路由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
/*** 请求<a href="/tag/lanjie/" target="_blank" class="keywords">拦截</a>器，请求发送之前做些事情*/axios.interceptors.request.use(config => {// POST || PUT || DELETE请求时先格式化data数据// 这里需要引入第三方模块qsif (config.method.toLocaleUpperCase() === 'POST' ||config.method.toLocaleUpperCase() === 'PUT' ||config.method.toLocaleUpperCase() === 'DELETE') {config.data = qs.stringify(config.data)}// 配置Authorization参数携带<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>tokenlet userData = getUserData()if (userData.token) {config.headers.Authorization = userData.token}return config},error => {// 此处应为弹窗<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>具体<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a>信息，因为是练手项目，劣者省略此处// 君可自行写 || 引入第三方UI框架console.error(error)return Promise.reject(error)})</pre></div><p>axios响应<a href="/tag/lanjie/" target="_blank" class="keywords">拦截</a>器<a href="/tag/daima/" target="_blank" class="keywords">代码</a></p><div class="jb51code"><pre class="brush:js;">/*** 响应拦截器，请求返回异常统一处理*/axios.interceptors.response.use(response => {// 这段<a href="/tag/daima/" target="_blank" class="keywords">代码</a>很多场景下没用if (response.data && response.data.success === false) {// 根据实际情况的一些处理逻辑...return Promise.reject(response)}return response},error => {// 此处报错可能因素比较多// 1.需要授权处<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>还未<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>，因为路由段有验证是否登陆，此处理论上不会出现// 2.需要授权处<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>登<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>过期// 3.请求<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a> 4xx// 5.服务器<a href="/tag/cuowu/" target="_blank" class="keywords">错误</a> 5xx// 关于鉴权失败，与后端约定状态码为500switch (error.response.status) {case <a href="/tag/403/" target="_blank" class="keywords">403</a>:// 一些处理...breakcase <a href="/tag/404/" target="_blank" class="keywords">404</a>:// 一些处理...breakcase 500:let userData = getUserData()if (userData.token === undefined) {// 此处为未<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>处理// 一些处理之后...再去<a href="/tag/denglu/" target="_blank" class="keywords">登录</a><a href="/tag/yemian/" target="_blank" class="keywords">页面</a>...// router.push({// path: '/login'// })} else {let overdueTime = userData.overdueTimelet nowTime = +new Dateif (overdueTime && nowTime > overdueTime) {// 此处<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>过期的处理// 一些处理之后...再去<a href="/tag/denglu/" target="_blank" class="keywords">登录</a><a href="/tag/yemian/" target="_blank" class="keywords">页面</a>...// router.push({// path: '/login'// })} else {// 极端情况，<a href="/tag/denglu/" target="_blank" class="keywords">登录</a>未过期，但是不知道哪儿错了// 按需处理吧...我暴力回到了<a href="/tag/shouye/" target="_blank" class="keywords">首页</a>router.push({path: '/'})}}breakcase 501:// 一些处理...breakdefault:// 状态码辣么多，按需配置...break}return Promise.reject(error)})</pre></div><p>想了解更多关于axios的信息？请移步 <a target="_blank" href="https://github.com/axios/axios#request-config" rel="external nofollow" >这里</a> 。</p><p>这个封装很简单，面对复杂的业务肯定还需要更多的考量，但是对于一般的小项目或边缘业务也差不多够用了。最后希望这篇<a href="/tag/wenzhang/" target="_blank" class="keywords">文章</a>能对有需要的同学提供一些帮助。</p><p>以上就是本文的全部<a href="/tag/neirong/" target="_blank" class="keywords">内容</a>，希望对大家的学习有所帮助，也希望大家多多<a href="/tag/zhichi/" target="_blank" class="keywords">支持</a>编程之家。</p>
