Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
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.overdueTimelet 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数据// 这里需要引入第三方模块qsif (config.method.toLocaleUpperCase() === 'POST' ||config.method.toLocaleUpperCase() === 'PUT' ||config.method.toLocaleUpperCase() === 'DELETE') {config.data = qs.stringify(config.data)}// 配置Authorization参数携带用户tokenlet 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// 关于鉴权失败,与后端约定状态码为500switch (error.response.status) {case 403:// 一些处理...breakcase 404:// 一些处理...breakcase 500:let userData = getUserData()if (userData.token === undefined) {// 此处为未登录处理// 一些处理之后...再去登录页面...// router.push({// path: '/login'// })} else {let overdueTime = userData.overdueTimelet nowTime = +new Dateif (overdueTime && nowTime > overdueTime) {// 此处登录过期的处理// 一些处理之后...再去登录页面...// router.push({// path: '/login'// })} else {// 极端情况,登录未过期,但是不知道哪儿错了// 按需处理吧...我暴力回到了首页router.push({path: '/'})}}breakcase 501:// 一些处理...breakdefault:// 状态码辣么多,按需配置...break}return Promise.reject(error)}
)
想了解更多关于axios的信息?请移步这里。
这个封装很简单,面对复杂的业务肯定还需要更多的考量,但是对于一般的小项目或边缘业务也差不多够用了。最后希望这篇文章能对有需要的同学提供一些帮助。
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1相关推荐
- Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
- Vue2基础(6)——vue-cli、element-ui、axios拦截器、proxy接口代理
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili喜欢的小伙伴们别忘了投币,点赞,收藏呦,历经 5 年的反复打磨与锤炼,黑马程序员重磅 ...
- vue2中使用axios,以及axios拦截器的配置
目录 一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
- vue路由守卫,axios拦截器,权限树
K15项目案例-后台 1.分页问题 关于分页表格列中的序号问题: <el-table-column type="selection" label="序号" ...
- Vue学习笔记:axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法 什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
- 5 拦截器拦截请求路由_手写简易版axios拦截器,实现微信小程序wx.request的封装与拦截...
前言: axios是一个功能强大的网络请求库,其中拦截器又是axios的精髓.在小程序的开发或者需要手动实现ajax的时候,没有实现对请求的拦截,开发的时候非常不方便,因此手写一个简易版的axios拦 ...
- vue面向切面_vue:在路由跳转中使用拦截器
1:首先在路由对象中的某一个具体的路由对象加这样一个属性 meta: { requireAuth:true } 2:然后在main.js中添加这段代码 router.beforeEach((to, ...
- 前端学习(1879)vue之电商管理系统电商系统之通过axios拦截器添加token认证
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
- 路由守卫 AJAX,vue路由导航守卫 和 请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...
最新文章
- 高职信息安全比赛攻防思路_30.LNGZ2020-30:2020年辽宁省职业院校技能大赛(高职组)“信息安全管理与评估”赛项规程...
- 转:delphi异常捕获try except语句 和 try finally语句用法
- Ubuntu8.10下修复FC7系统的home分区
- Centos系统磁盘扩容
- IDEA系列(十)--新建一个项目后之前的项目不显示
- 【测试面试题】控制体重
- 危机管理计划书模板_免费领!40套商业计划书PPT模板+10份知名公司商业计划书真实案例范文...
- View.inflate和LayoutInflater的inflate方法区别
- 前端学习(1728):前端系列javascript之状态栏分析
- LeetCode刷题实战(2):Add Two Numbers
- 150秒内诊断脑瘤!最新医学影像AI在《Nature Medicine》发表
- STM32工作笔记0097---OEM厂是什么意思
- doctor mysql数据导入_线上环境mysql主从同步的搭建过程
- java类库中的设计模式
- 《深入浅出数据分析》读书心得与笔记
- 野火stm32f407学习笔记----核心板USB转TTL下载
- 分享基于白鹭Egret联合Matchvs开发的足球游戏(附Demo源码)
- java画太极加图片_Android 画一个太极图实例代码
- matlab中画圆圈,如何在Matlab中绘制圆圈?
- msconfig打不开,运行找不到msconfig解决办法