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

2023-09-14 08:09:05 423

1.写在前面

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

2.具体需求

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

3.简单实现

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

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

importVuefrom'vue'
importRouterfrom'vue-router'
import{getUserData}from'@/script/localUserData'

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

Vue.use(Router)

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

constrouter=newRouter({
mode:'history',
routes
})

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

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

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

3.2对axios拦截器封装

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

```

importqsfrom'qs'

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

importrouterfrom'@/router'

importaxiosfrom'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
letuserData=getUserData()
if(userData.token){
config.headers.Authorization=userData.token
}
returnconfig
},
error=>{
//此处应为弹窗显示具体错误信息，因为是练手项目，劣者省略此处
//君可自行写||引入第三方UI框架
console.error(error)
returnPromise.reject(error)
}
)

axios响应拦截器代码

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

热门推荐

随机推荐