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 = () => {
  // 退出登录需要清除token
  return http.get("/oauth/logout", { headers: { accessToken: "" } });
};

参考文章:

GitHub Interceptors

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

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-element-admin中,可以使用axios进行转发设置。axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js。它可以将请求发送到后端服务器并接收响应数据。 要设置axios的转发,你可以按照以下步骤进行操作: 1. 打开项目目录下的`src/utils/request.js`文件。这是封装了axios的请求方法的文件。 2. 在该文件中找到`createRequest`函数,在函数体内找到`service`对象。 3. `service`对象是一个axios实例,你可以通过该实例来设置转发。例如,可以使用`service.interceptors.request.use()`方法来添加请求拦截器,使用`service.interceptors.response.use()`方法来添加响应拦截器。 4. 在请求拦截器中,你可以对请求进行一些处理,例如添加请求头、设置token等。 5. 在响应拦截器中,你可以对响应进行一些处理,例如对错误进行统一处理、对返回数据进行格式化等。 6. 另外,你还可以在`src/api`文件夹中的每个API接口文件中,根据需要使用axios进行转发设置。 总结起来,要在vue-element-admin项目中设置axios的转发,你需要找到`src/utils/request.js`文件,并根据需要使用`service.interceptors.request.use()`和`service.interceptors.response.use()`方法进行拦截器的设置。这样可以对请求和响应进行统一处理和转发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-element-admin:vue-element-admin](https://download.csdn.net/download/weixin_42168745/16228234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue-element-admin-template](https://download.csdn.net/download/weixin_42142062/15991791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [浏览器显示数据库中数据的条形图柱状图 前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 ...](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值