浪花 - 响应拦截器(强制登录)

news2024/12/25 13:44:57

1. 配置响应拦截器

import axios from 'axios';

const myAxios = axios.create({
    baseURL: 'http://localhost:8080/api/',
});

myAxios.defaults.withCredentials = true;

// 请求拦截器
myAxios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log("发送请求啦...");
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// 响应拦截器
myAxios.interceptors.response.use(function (response) {
    // Do something with response data
    console.log("接收到请求啦...");
    return response.data;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

export default myAxios;

2. 强制跳转到登录页面

  • 有些页面只允许用户登录后查看
  • 未登录用户没有权限,后端返回 40100
  • 前端接收到 40100 则跳转到登录页面,要求用户进行登录

// 响应拦截器
myAxios.interceptors.response.use(function (response) {
    // Do something with response data
    console.log("接收到请求啦...");
    // 未登录,强制跳转到登录页
    if (response?.data?.code === 40100) {
        const redirectUrl = window.location.href;
        window.location.href = `/user/login?redirect${redirectUrl}`;
    }
    return response.data;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

export default myAxios;

3. 登录成功跳转到登录之前的页面

  • 记录当前页面,拼接到 url 的 redirect 后面

  • 登录成功,取出 redirect,重定向到 redirect
// 提交登录表单信息
const onSubmit = async (values) => {
  const res = await myAxios.post('/user/login', {
    userAccount: userAccount.value,
    userPassword: userPassword.value,
  })
  console.log(res, "用户登录");
  if (res.code === 0 && res.data) {
    // 返回到之前的页面
    const redirectUrl = route.query?.redirect as string ?? '/';
    window.location.href=redirectUrl;
  } else {
    Toast.fail("登录失败");
  }
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1413205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】list讲解及模拟

目录 list的基本介绍 list模拟实现 一.创建节点 二.迭代器 1.模版参数 2.迭代器的实现: a. ! b. c. -- d. *指针 e.&引用 整体iterator (与const复用): 三.功能实现 1.模版参数 2.具体功能实现: 2.1 构造函数 2.2 begi…

第139期 做大还是做小-Oracle名称哪些事(20240125)

数据库管理139期 2024-01-25 第139期 做大还是做小-Oracle名称哪些事(20240125)1 问题2 排查3 扩展总结 第139期 做大还是做小-Oracle名称哪些事(20240125) 作者:胖头鱼的鱼缸(尹海文) Oracle A…

云计算中的弹性是什么?

云弹性是指当客户需求增加或减少时,自动从数据中心配置和取消配置资源。这使得云资源(包括计算、存储和内存资源)能够根据需求变化快速重新分配。CPU/处理、内存、输入/输出带宽和存储容量等计算资源可以根据需要增加或减少,而不会影响系统性能。 它旨在…

前端工程化基础(一):Node模块化

Node模块化 Node.js是什么 官方定义:Node.js是一个基于V8 JavaScript引擎的JavaScript运行时的环境 Node.js基于V8引擎来执行 JavaScript代码,但是Node.js中不仅仅有V8 我们知道,V8可以嵌入到C应用程序中,因此无论是Chrome还是No…

EventSource 长链接执行

EventSource 说明文档MDN 其他参考文档 一、利用node启服务 import fs from fs import express from express const app express() // eventSource 仅支持 get 方法 // 服务器端发送的数据必须是纯文本格式,不能是二进制数据。 app.get(/api, (req, res) > …

智能AI系统开发,专业软件硬件物联网开发公司,探索未来科技新纪元

在信息时代,人工智能(AI)、物联网等前沿技术日益受到人们的关注。智能AI系统、专业软件硬件物联网开发公司应运而生。今天,我们将向大家介绍一家位于XX城的专业公司,致力于智能AI系统开发和软件硬件物联网领域的创新研…

光学系统的核心--分辨率

前言 在机器视觉领域,可以把各个部件划分为光源,镜头,相机,采集卡,算法,运动平台等。各个部件都是系统的有机组合,均有各自的重要性。在实际应用中,成像镜头涉及的光学理论较多&…

Vue 响应式原理源码剖析

文章目录 1. 说明2. 初始化initState()initProps()initData()observe()ObserverdefineReactive() 3. 数据代理4. 模板解析4.1. 模板解析的基本流程4.2. 模板解析(1): 大括号表达式解析4.3. 模板解析(2): 事件指令解析4.4. 模板解析(3): 一般指令解析 5. 数据绑定5.1. 数据绑定5…

实体识别与分类方法综述

目录 前言1 实体识别简介2 基于模板和规则的方法3 基于序列标注的方法3.1 常见序列标注模型3.2 模型参数估计和学习问题3.3 常见序列预测模型 4. 基于深度学习的实体识别方法5 基于预训练语言模型的实体识别5.1 BERT、GPT等预训练语言模型5.2 解码策略 6 特殊问题与挑战6.1 标签…

Ultraleap 3Di新建项目之给所有的Joint挂载物体

工程文件 Ultraleap 3Di给所有的Joint挂载物体 前期准备 参考上一期文章,进行正确配置 Ultraleap 3Di配置以及在 Unity 中使用 Ultraleap 3Di手部跟踪 新建项目 初始项目如下: 新建Create Empty 将新建的Create Empty,重命名为LeapPro…

10-微服务Nacos Config的通用配置

一、解决不同环境相同配置问题-自定义Data ID配置 在实际的开发过程中,我们的项目所用到的配置参数有的时候并不需要根据不同的环境进行区分,生产、测试、开发环境所用到的参数值是相同的。那么解决同一服务在多环境中,引用相同的配置的问题…

HTTP中POST、GET、PUT、DELETE方式的区别

GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改、增加数据,不会影响资源的内容,即该请求不会产生副作用。无论进行多少次操作&#x…

uni-app 微信小程序之红包雨活动

文章目录 1. 页面效果2. 页面样式代码 1. 页面效果 GIF录屏有点卡&#xff0c;实际比较丝滑 每0.5s掉落一个红包控制4s后自动移除红包点击红包消除红包&#xff08;或者自行1&#xff0c;或者弹窗需求&#xff09; 2. 页面样式代码 <!-- 红包雨活动 --> <template>…

【TCP】重传与超时机制

前言 在网络通信的世界里&#xff0c;传输控制协议&#xff08;TCP&#xff09;扮演着一个至关重要的角色。它确保了数据的可靠传输&#xff0c;就像邮差确保每一封信都能准确无误地送达收件人手中一样。但是&#xff0c;网络环境充满了不确定性&#xff0c;数据包可能会因为各…

(大众金融)SQL server面试题(3)-客户已用额度总和

今天&#xff0c;面试了一家公司&#xff0c;什么也不说先来三道面试题做做&#xff0c;第三题。 那么&#xff0c;我们就开始做题吧&#xff0c;谁叫我们是打工人呢。 题目是这样的&#xff1a; DEALER_INFO经销商授信协议号码经销商名称经销商证件号注册地址员工人数信息维…

web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动

给场景中的模型加上广告牌描述&#xff0c;可以在模型的MESH里添加Sprite&#xff0c;配上相应的文字&#xff0c; 描述Sprite的位置则是在mesh中的相对位置&#xff0c;比如模型高10&#xff0c;那么我们可以给一个y等于10 来进行适配&#xff0c;这样在移动模型mesh网格时可…

重磅!讯飞星火V3.5马上发布!AI写作、AI编程、AI绘画等功能全面提升!

讯飞星火大模型相信很多友友已经不陌生了&#xff0c;可以说是国内GPT相关领域的龙头标杆&#xff0c;而对于1月30日即将在讯飞星火发布会发出的V3.5新版本来说&#xff0c;讯飞星火V3.5与之前版本相比&#xff0c;性能提升方面相当明显&#xff0c;在提示语义理解、内容生成、…

常见の算法链表问题

时间复杂度 1.链表逆序 package class04;import java.util.ArrayList; import java.util.List;public class Code01_ReverseList {public static class Node {public int value;public Node next;public Node(int data) {value data;}}public static class DoubleNode {publi…

零基础学习数学建模——(四)备战美赛

本篇博客将讲解如何备战美赛。 什么是美赛 美赛&#xff0c;全称是美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;由美国数学及其应用联合会主办&#xff0c;是最高的国际性数学建模竞赛&#xff0c;也是世界范围内最具影响力的数学建模竞赛。 赛题内容…

Unity3D学习之UI系统——NGUI

文章目录 1. 前言2 NGUI下载和导入3. NGUI三大组件3.1 Root组件3.1.1 分辨率概念3.1.2 Root的作用3.1.3 root脚本各组件3.1.4 总结 3.2 Panel 组件3.2.1 Panel的作用3.2.2 Panel的控件3.2.3 总结 3.3 EventSystem组件3.3.1 作用3.3.2 组件3.3.3 总结 4 图集制作4.1 图集的作用4…