axios拦截器和token

news2024/11/17 6:49:51

axios拦截器

​​在这里插入图片描述
在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你稍后需要移除拦截器,可以这样:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以给自定义的 axios 实例添加拦截器。

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

Token

为什么要用Token

客户端频繁地向服务端请求数据,服务端频繁地去数据库查询用户名和密码并进行对比,判断用户名和密码是否正确,并做出相应的提示,token应运而生
token—用户信息

Token的定义

Token就是服务端生成的一串字符串,作为客户端进行请求的一个令牌,第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token来请求
数据即可,无需再次带上用户名和密码

Token目的:减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮

在这里插入图片描述

获取后台Token

  1. 登录时后台会给一个token字符串,前端把token存储在cookie或localStorage中
  2. router中设置导航守卫,判断token是否存在,若存在,则进行下一步操作,否则,返回登录
  3. axios的请求拦截中携带token进行请求

固定的写法: token的前面拼接字符串 “Bearer” + token值

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

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

相关文章

阿里云国际站代理商:阿里巴巴的阿里云到底是做什么用的,怎么我们普通人不理解,也不知道是怎么样一种服务?

阿里巴巴的阿里云到底是做什么用的,怎么我们普通人不理解,也不知道是怎么样一种服务?   阿里巴巴的阿里云,不只是一个名字——打通理解的迷宫   面对朝日逐极而生的科技天光,阿里巴巴如一座灯塔引领者我们向前。然…

openGauss学习笔记-02 openGauss系统架构

文章目录 openGauss学习笔记-02 openGauss系统架构2.1 软件架构2.1.1 逻辑架构2.1.2 逻辑架构说明 openGauss学习笔记-02 openGauss系统架构 openGauss是单机系统,在这样的系统架构中,业务数据存储在单个物理节点上,数据访问任务被推送到服务…

nginx七层代理和四层转发的理解

先来理解一下osi七层模型 应用层 应用层是ISO七层模型的最高层,它直接与用户和应用程序交互,提供用户与网络的接口。它包括各种应用协议,如HTTP、FTP、SMTP等,用于实现特定应用的功能和通信表示层 表示层…

鉴机:粉丝买了一台宝峰uv5r对讲机,竟是假的?

最近有粉丝在某宝上购买了一台uv5r对讲机,回来拆盒后发现有点不对劲,甚至连logo都没有,请各位鉴别一下,看看是真的还是假的。 网友买的uv5r对讲机 其他网友看完后几乎一致认为是假的,有人还贴出来比对照片&#xff1a…

系统版本由Centos7.9恢复到RedHat7.5

问题描述 安装nginx的时候无法联网,通过rpm包进行的安装,打包编译时使用的部分依赖包是centos的资源,导致安装后系统版本由之前的RedHat7.5变成了centos7.9。现需恢复到之前的系统版本。 解决方法 将之前安装的centos资源包删除&#xff0c…

GBASE智赋城轨再下一城!兰州轨道交通2号线开通试运营

“欢迎乘坐兰州轨道交通2号线……”6月29日上午9时36分,伴随一阵悦耳的播报声,兰州轨道交通2号线一期工程开通试运营,面向社会开放。 兰州轨道交通2号线一期工程全长9.06公里,共设置9座车站,2号线的开通试运营宣告兰州…

倍量过左峰选股公式,找到起爆点

左峰简单来说就是前期拉升形成的波段高点,左峰之后是回调,形成凹口,过左峰就是突破前期波段高点。从左峰的数量上,有过一峰、二峰、三峰等;从量价上,有倍量过左峰、缩量过左峰等。本文编写倍量过左峰选股公…

Ubuntu:修改ssh端口并开放防火墙

Ubuntu开放防火墙并修改ssh端口 1、概述2、修改ssh端口并启用防火墙2.1、 修改ssh端口2.2、开启防火墙2.3、端口加入防火墙2.4、查看防火墙中开放的端口2.5、使用新ssh端口连接服务器 3、总结 1、概述 大家好,我是欧阳方超,可以关注我的公众号“欧阳方超…

Vue解决首屏加载缓慢的首屏优化秒开(亲测有效)

一.开启gzip打包 在vue.config.js文件中 (1).使用chainWebpack配置的方式 chainWebpack(config){ config.module.rule(vue).use(vue-loader).loader(vue-loader).tap(options > {options.compilerOptions.preserveWhitespace truereturn options…

【数据结构】循环队列

🚀 作者简介:一名在后端领域学习,并渴望能够学有所成的追梦人。 🐌 个人主页:蜗牛牛啊 🔥 系列专栏:🛹数据结构、🛴C 📕 学习格言:博观而约取&…

OpenGl纹理贴图

给图形赋予颜色时,采用纹理贴图的方式。 每个顶点关联一个纹理坐标(Texture Coordinate),然后在图形的其他片段上进行片段插值(Fragment Interpolation) 顶点坐标如下: float vertices[] { // positions // colors // texture coords 0.2f, 0.2f, 0.0f,…

飞控学习笔记-传感器IMU(陀螺仪+加速度计+磁力计)

陀螺仪 陀螺仪校准 加速度计 加速度不仅包含载体运动的加速度,也包括地球的重力加速度,所以也称为比力计 加速度计标定(校准) 姿态解算和惯性导航的重要传感器为加速度计、陀螺仪和磁强计,这三种传感器中&#xff0c…

爆肝4万字❤️零基础掌握Verilog HDL

文章目录 0.前言1.Verilog HDL简介1.1 什么是Verilog HDL1.2 verilog发展历史ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ1.3 为什么要使用verilog1.4 IP core 2.语法入门详解2.1 数据类型及常量变量2.1.1 数据类型2.1.2 常量2.1.3 变量2.1.3.1 连线型-wire(assign的使用)2.…

【数据分析 - 基础入门之NumPy④】NumPy基本操作 - 一

知识目录 前言一、NumPy介绍1.1 导入NumPy库1.2 查看NumPy版本1.3 读取图片返回NumPy数组 二、创建NumPy数组的十二种方式2.1 array 和 full2.2 zeros 和 ones2.3 随机数数组2.4 服从正态分布的数组2.5 arrange 和 eye、linspace 三、ndarray属性四、ndarray基本操作4.1 索引4.…

渗透专题丨Vulnhub-Tr0ll靶机打靶

首先安装好靶机,再打开Kali,使用ifconfig查看Kali IP信息,之后使用nmap进行扫描网段: image-20230629200225568 经过排除主机IP和Kali IP,选择192.168.38.139,进行端口扫描: image-20230629201…

PDF怎么转Excel?这三个方法非常实用!

在现代生活中,PDF(Portable Document Format)已成为广泛使用的文件格式之一。然而,有时我们需要将PDF文件中的数据提取并转换为Excel(电子表格)格式,以便更方便地编辑、分析和处理数据。本文将介…

剑指offer34.二叉树中和为某一值的路径

用深度遍历的方法找出每一条路径&#xff0c;看看和是否是目标值。 class Solution {Deque<Integer> queue new LinkedList<Integer>();List<List<Integer>> res new LinkedList<List<Integer>>();public List<List<Integer>&…

Component name ‘Channel‘ should always be multi-word

新建vue文件后&#xff0c;会出现第一行代码爆红现象 报错原因: 在组件命名的时候未按照 ESLint 的官方代码规范进行命名&#xff0c;根据 ESLint 官方代码风格指南&#xff0c;除了根组件&#xff08;App.vue&#xff09;以外&#xff0c;其他自定义组件命名要使用大驼峰命名方…

IO流总结:

常用方法&#xff1a; 输入&#xff1a; new bufferedreader(new FileReader(“a.txt”))

Hadoop知识点

1.HDFS写数据流程 客户端通过Distributed FileSystem模块向NameNode请求上传文件&#xff0c;NameNode检查目标文件是否已存在&#xff0c;父目录是否存在。NameNode返回是否可以上传。客户端请求第一个 Block上传到哪几个DataNode服务器上。NameNode返回3个DataNode节点&#…