<强> 1。写在前面
最近在学习Vue2,遇到有些页面请求数据需要用户登录权限,服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文。
<强> 2。具体需求
<李>用户鉴权与重定向:使用Vue提供的路由导航钩子李
<李>请求数据序列化:使用axios提供的请求拦截器李
<李>接口报错信息处理:使用axios提供的响应拦截器李
<强> 3。简单实现
3.1路由导航钩子层面鉴权与重定向的封装
路由导航钩子所有配置均在路由器/index.js这里是部分代码
从“Vue”进口Vue
从“vue-router”进口路由器
从“进口{getUserData} @/脚本/localUserData”
const MyAddress=r=比;要求。确保([],()=比;r(要求(@/视图/MyAddress/MyAddress)),“MyAddress”)
Vue.use(路由器)
const路线=[
{
路径:/资料/地址,
名称:“MyAddress”,
组件:MyAddress,
元:{
标题:“我的地址”,
requireAuth:真
}
},//更多…
]
const路由器=new路由器({
模式:“历史”,
路线
})
之前
我们主要来看下面逻辑处理部分的代码
让indexScrollTop=0
路由器。beforeEach(下),从=比;{//路由进入下一个路由对象前,判断是否需要登陆//在路由元对象中由个requireAuth字段,只要此字段为真的,必须做鉴权处理
如果(to.matched。一些(res=比;res.meta.requireAuth)) {//用户数据为存储在本地的一些用户信息
让用户数据=https://www.yisu.com/zixun/getUserData ()//未登录和已经登录的处理//getUserData方法处理后如果userData.token没有值就是未定义的,下面直接判断
如果(用户数据。令牌===未定义){//执行到此处说明没有登录,君可按需处理之后再执行如下方法去登录页面//我这里没有其他处理,直接去了登录页面
下一个({
路径:/登录,
查询:{
重定向:to.path
}
})
其他}{//执行到说明本地存储有用户信息//但是用户信息是否过期还是需要验证一下滴
让overdueTime=userData.overdueTime
让nowTime=+新的日期//登陆过期和未过期
如果(nowTime比;overdueTime) {//登录过期的处理,君可按需处理之后再执行如下方法去登录页面//我这里没有其他处理,直接去了登录页面
下一个({
路径:/登录,
查询:{
重定向:to.path
}
})
其他}{
next ()
}
}
其他}{
next ()
}
如果()。路径!=='/'){
indexScrollTop=document.body.scrollTop
}
文档。标题=to.meta。标题| | document.title
})
路由器。afterEach(路线=比;{
如果路线。路径!=='/'){
document.body。scrollTop=0
其他}{
Vue.nextTick(()=比;{
document.body。scrollTop=indexScrollTop
})
}
})
出口的默认路由器
之前
至此,路由钩子层面的鉴权处理完毕,不过细心的你可能注意到:导航去登录页面调用接下来的方法里面有个查询对象,携带了目标路由的地址,这是因为在登录成功后我们需要重定向到目标页面。
3.2对axios拦截器封装
axios所有配置均在件脚本/getData.js文件,这里是本文件公共代码部分
' ' '
从“qs”进口qs
从“进口{getUserData} @/脚本/localUserData”
从“@/路由器”进口路由器
从“axios”进口axios
从“进口{AJAX_URL} @/config/指数”
axios.defaults.baseURL=AJAX_URL
比;axios请求拦截器代码
' ' '/* *
*请求拦截器,请求发送之前做些事情
*/axios.interceptors.request.use (
配置=比;{//发布| |把| |删除请求时先格式化数据数据//这里需要引入第三方模块qs
如果(
config.method.toLocaleUpperCase ()===癙OST”| |
config.method.toLocaleUpperCase()==='把' | |
config.method.toLocaleUpperCase()==='删除'
) {
配置。data=https://www.yisu.com/zixun/qs.stringify (config.data)
}//配置授权参数携带用户令牌
让用户数据=getUserData ()
如果(userData.token) {
config.headers。授权=userData.token
}
返回配置
},
错误=> {//此处应为弹窗显示具体错误信息,因为是练手项目,劣者省略此处//君可自行写| |引入第三方UI框架
console.error(错误)
返回Promise.reject(错误)
}
)
