vue---axios拦截器处理登录失效跳转登录页

axios拦截器（Interceptors）主要分为：

（1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers

（2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。

项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。

完整代码：

// 导入axios
import axios from "axios";
import { MessageBox } from "element-ui";
const querystring = require("querystring");
import ElementUI from "element-ui";// 设置基地址-使用自定义配置新建一个 axios 实例
// 注意：打包时baseURL要加上api,即baseURL: "/api"
const http = axios.create({baseURL: "/",headers: { accessToken: localStorage.getItem("token") }
});// 拦截响应response，并做一些错误处理
http.interceptors.response.use(response => {// 登录失效处理if (response.data.respCode == "00002") {MessageBox.alert(response.data.respDesc, "登录失效", {confirmButtonText: "跳转登录页面",callback: action => {// 跳转登录页window.location.href = "/";}});} else if (response.data.respCode != "00000") {if (response.data.respDesc != "") {ElementUI.Message({title: "错误",message: response.data.respDesc,type: "error"});}}return response;},error => {if (error.response.status == 401) {ElementUI.Message({title: "警告",message: error.response.data.respDesc,type: "warning"});}return Promise.reject(error);}
);export default http;
//  ******一、登录******
// 登录请求
export const login = param => {return http.post("oauth/login/user", param, { headers: { accessToken: "" } });
};
// 退出登录
export const logout = () => {// 退出登录需要清除tokenreturn http.get("/oauth/logout", { headers: { accessToken: "" } });
};

参考文章：

GitHub Interceptors

vue.js项目中在axios响应拦截器中跳转登录页面

vue---axios拦截器处理登录失效跳转登录页相关推荐

vue ajax拦截器,Vue-resource拦截器判断token失效跳转详解
本文主要为大家带来一篇Vue-resource拦截器判断token失效跳转的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 在拦截器中设置全局的 ...
Vue axios拦截器使用
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.这篇文章主要介绍了vue/axios请求拦截的相关知识,需要的朋友可以参考下 axios使用拦截器在请求或响应 ...
vue axios拦截器的封装
// request.js import axios from 'axios' import qs from 'qs'// 创建axios实例 const service = axios.create ...
vue axios 拦截器配置与封装
一.安装 1. 利用npm安装npm install axios --save --save:安装在生产环境二.例子要想统一处理所有http请求和响应,就得用上 axios 的拦截器. axios ...
angular4 使用HttpClient拦截器检查token失效，返回登录页面
1.首先创建一个拦截器服务:InterceptorService.ts 2.在app.module.ts文件里引入拦截器 import {InterceptorService} from './Int ...
axios 拦截器不生效填坑
Vue axios拦截器不生效填坑: 1.let instance = axios.create();//此处创建拦截器,拦截器处理过程省略 2.Vue.prototype.$http = insta ...
vue路由守卫,axios拦截器,权限树
K15项目案例-后台 1.分页问题关于分页表格列中的序号问题: <el-table-column type="selection" label="序号" ...
Vue学习笔记：axios 拦截器的用法
Vue学习笔记:axios 拦截器的用法什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...
Vue中的axios拦截器
axios中的拦截 1.1 介绍: 拦截器包括请求拦截器与相应拦截器,可以在请求发送前或者相应后进行拦截处理.在axios对象上有一个interceptors属性,该属性又有request和respo ...

vue---axios拦截器处理登录失效跳转登录页

vue---axios拦截器处理登录失效跳转登录页相关推荐

最新文章

热门文章