//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(
res => {
//对响应数据做些事
if (res.data && !res.data.success) {
Message({
// 饿了么的消息弹窗组件,类似toast
showClose: true,
message: res.data.error.message.message
? res.data.error.message.message
: res.data.error.message,
type: "error"
});
return Promise.reject(res.data.error.message);
}
return res;
},
error => {
// 用户登录的时候会拿到一个基础信息,比如用户名,token,过期时间戳
// 直接丢localStorage或者sessionStorage
if (!window.localStorage.getItem("loginUserBaseInfo")) {
// 若是接口访问的时候没有发现有鉴权的基础信息,直接返回登录页
router.push({
path: "/login"
});
} else {
// 若是有基础信息的情况下,判断时间戳和当前的时间,若是当前的时间大于服务器过期的时间
// 乖乖的返回去登录页重新登录
let lifeTime = JSON.parse(window.localStorage.getItem("loginUserBaseInfo")).lifeTime * 1000;
let nowTime = new Date().getTime(); // 当前时间的时间戳
if (nowTime > lifeTime) {
Message({
showClose: true,
message: "登录状态信息过期,请重新登录",
type: "error"
});
router.push({
path: "/login"
});
} else {
// 下面是接口回调的satus ,因为我做了一些错误页面,所以都会指向对应的报错页面
if (error.response.status === 403) {
router.push({
path: "/error/403"
});
}
else if (error.response.status === 500) {
router.push({
path: "/error/500"
});
}
else if (error.response.status === 502) {
router.push({
path: "/error/502"
});
}
else if (error.response.status === 404) {
router.push({
path: "/error/404"
});
}
}
}
// 返回 response 里的错误信息
let errorInfo = error.data.error ? error.data.error.message : error.data;
return Promise.reject(errorInfo);
}
);

[代码笔记]VUE路由根据返回状态判断添加响应拦截器的更多相关文章

  1. Vue添加请求拦截器

    一.现象 统一处理错误及配置请求信息 二.解决 1.安装 axios  , 命令: npm install axios --save-dev 2.在根目录的config目录下新建文件 axios.js ...

  2. vue axios请求/响应拦截器

    // main.js中配置 // 引入 axios import Axios from 'axios' // 这时候如果在其它的组件中,是无法使用 axios 命令的. // 但如果将 axios 改 ...

  3. [原创]java WEB学习笔记65:Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) ModelDriven拦截器 paramter 拦截器

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. vue配置请求拦截器和响应拦截器

    首先确保我们已经设置的store.js进行值的存取,这时候我们需要配置请求和响应的拦截器设置 main.js import Vue from 'vue' import App from './App' ...

  5. Vue——路由:登录状态的判断

    在搭建的系统中,最基本的登录都是必须的,结合Vue的路由,涉及最多的就是登录状态的判断.也就是说,如果一个组件要校验登录状态,则在用户初始进入时,就要去判断用户是否登录,这里的校验登录状态就是本篇的重 ...

  6. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

  7. 前端 | Vue 路由返回恢复页面状态

    需求场景:首页搜索内容,点击跳转至详情页,页面后退返回主页,保留搜索结果. 方案:路由参数:路由守卫 需求描述 在使用 Vue 开发前端的时候遇到一个场景:在首页进行一些数据搜索,点击搜索结果进入详情 ...

  8. 两段代码实现vue路由懒加载

    const Foo = () => import('./Foo.vue') const router = new VueRouter({ routes: [ { path: '/foo', co ...

  9. vue路由参数的获取、添加和替换

    获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...

随机推荐

  1. display: table-cell的实用应用

    概述 之前工作中碰到了一个垂直居中问题,最后通过查资料利用table-cell解决.于是打算总结一下有关table-cell的应用,记录下来,供以后开发时参考,相信对其他人也有用. 参考资料:我所知道 ...

  2. struts2框架(1)---struts2入门

    struts2框架 如果你之前在MVC模式的时候一直都是通过servlet,获取和返回数据,那么现在开始学习struts2框架, Struts是一个实现MVC设计模式的优秀的框架.它的许多优点我就不说 ...

  3. 改变input的值不会触发change事件的解决思路

    通常来说,如果我们自己通过 value 改变了 input 元素的值,我们肯定是知道的,但是在某些场景下,页面上有别的逻辑在改变 input 的 value 值,我们可能希望能在这个值发生变化的时候收 ...

  4. Java 容器 & 泛型:五、HashMap 和 TreeMap的自白

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Java 容器的文章这次应该是最后一篇了:Java 容器 系列. 今天泥瓦匠聊下 Maps. 一.Ma ...

  5. 【原创】驱动卸载之DeleteService

    BOOL WINAPI DeleteService( _In_ SC_HANDLE hService ); 函数作用:从SCM数据库中标志一个服务已删除 参数: 1. OpenService 或Cre ...

  6. Go基础系列:Go实现工作池的两种方式

    worker pool简介 worker pool其实就是线程池thread pool.对于go来说,直接使用的是goroutine而非线程,不过这里仍然以线程来解释线程池. 在线程池模型中,有2个队 ...

  7. ElasticSearch+Logstash+Filebeat+Kibana集群日志管理分析平台搭建

    一.ELK搜索引擎原理介绍 在使用搜索引擎是你可能会觉得很简单方便,只需要在搜索栏输入想要的关键字就能显示出想要的结果.但在这简单的操作背后是搜索引擎复杂的逻辑和许多组件协同工作的结果. 搜索引擎的组 ...

  8. python模块之random

    python的随机数模块为random模块,可以产生随机的整数或浮点数.但是这是伪随机数,python解释器会维护一些种子数,然后根据算法算出随机数.linux维护了一个熵池,这个熵池收集噪音的信息, ...

  9. Winform系列——好看的DataGridView折叠控件

    来园子几年了,第一次写博客.以前看到别人的博客就在想:这些人怎么能有这么多时间整理这么多知识,难道他们不用工作.不用写代码.不用交付测试?随着工作阅历的增加,发现其实并不是时间的问题,关键一个字:懒. ...

  10. js如何获取url参数

    匹配URL参数的正则是: var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", ...