Vue3项目准备:utils工具插件文件夹中封装request.js配置axios请求基地址及超时时间、请求拦截器、响应拦截器

news2024/11/27 0:30:43

token介绍

概念:访问权限的令牌,本质上是一串字符串

创建:正确登录后,由后端签发并返回

作用:判断是否有登录状态等,控制访问权限

注意:前端只能判断token有无,而后端才能判断token的有效性

通俗地讲,每个已经登录的用户都会有一个独一无二的token,这个token是用户访问除登录页之外的其他网页、向服务器发请求的一把“钥匙”,如果token为空(没有钥匙)或用户伪造了token(钥匙是假的)或者token已过期,那么就需要将用户“踢”回登录页,让用户登录之后再访问网页

axios请求基地址及超时时间

代码如下

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址,超时时间
  baseURL,
  timeout: 10000
})

代码解释

  1. baseURL: 这是用于设置请求的基础地址,即请求的 URL 会以该地址为基准进行拼接。例如,如果设置了 baseURL 为 "https://api.example.com",那么在发送请求时,拼接的 URL 会以该地址作为起点。这样可以避免在每个请求中都写入完整的 URL 地址。在示例中,baseURL 是一个变量,可能是在其他地方定义的。

  2. timeout: 这是用于设置请求的超时时间,单位为毫秒。如果请求在指定的时间内没有收到响应,那么该请求会被取消。在示例中,timeout 被设置为 10000 毫秒,即 10 秒。

axios请求拦截器

发起请求之前,触发的配置函数,对请求参数进行额外配置

举个例子,我们上面提到token是用户向服务器发请求的一把“钥匙”,那么用户发请求肯定需要在请求头携带token

那么我们可以在请求拦截器里把token配置到请求头里,这样每一个请求的请求头都会自动携带token,代码如下

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

 代码解读

axios响应拦截器 

响应回到then/catch 之前,触发的拦截函数,对响应结果统一处理

一般来说,服务器响应对象res.data.code === 0(或者200)时为请求成功,其余情况为请求失败,请求失败时我们需要根据错误状态码进行相应的处理,比如处理业务失败时需要将响应的错误信息打印在屏幕上给用户看到,在用户token过期时我们需要把用户“踢”回登录页

而这些错误状态的处理,我们都可以在响应拦截器里进行配置,代码如下

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    // TODO 3. 处理业务失败
    // 处理业务失败, 给错误提示,抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

其中,返回的res就是then服务器响应对象,err就是catch服务器响应对象

你有可能会疑惑return Promise.reject(err)的作用,它的作用是抛出异常,中断程序。以用户登录为例,代码如下,注意一定要用await等待响应结果,否则响应还没返回下面三行代码就执行完了

现在想想,我之前的代码称之为“屎山代码”真的一点都不为过,由于之前一直不会请求拦截器和响应拦截器,所以我判断token是否过期的方法就是在每一个请求的后面加上一个判断,如果状态码时2001,代表token过期,“踢”回登录页

真的要被我自己蠢笑了

request.js文件的使用

由于request.js里封装了axios以及axios请求基地址、超时时间、请求拦截器、响应拦截器,所以我们在其他需要编写请求代码的文件中可以导入request.js,然后通过request.post(或者equest.get或者……)就可以发起请求啦

比如我在,src文件夹下新建api文件夹用来统一编写请求,在api文件夹下新建一个user.js用来编写用户信息相关的请求

如何使用这些请求呢?在需要的vue页面中导入使用就好啦

比如登录页面中的登录逻辑

//导入登录函数
import { userLoginService } from '@/api/user.js'

const Login = async () => {
    if (userName.value.trim() === '') {
        ElMessage.error('请填写用户名!')
        return
    } else if (password.value.trim() === '') {
        ElMessage.error('请填写密码!')
        return
    } else {
        const res = await userLoginService({
            username: userName.value,
            password: password.value
        })
        userStore.setToken(res.data.token)
        ElMessage.success('登录成功')
        router.push('/layout')
    }
}

 

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

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

相关文章

【vue3+pinia+uniapp项目问题:使用pinia状态管理时store的数据更新,模板渲染视图不能实时更新】

在这里选择不同的学校后,发现store里面的数据打印出来能更新,但是使用store的数据打印出来并未实时更新且渲染在模板上,必须手动刷新视图才能更新。 原因是因为使用了解构赋值传入参数 解决方法 1.使用computed 现在视图能进行实时更新…

GA/T 1400视频汇聚平台EasyCVR级联后,平台显示无通道是什么原因?

国标GB28181安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台部署轻快,可支持的主流标准协议有GA/T 1400、国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。 有用户反馈&#xff…

Servlet实现会话追踪登录功能(结合JDBC)

目录 1.技术要求 2.关于会话Session 生活例子 代码体现 1.存储到session 2.从session中拿出 3.完成登录功能 4.利用Session作追踪 关于jstl应用 关于EL表达式应用 注意 5.测试 1.技术要求 核心: (1)Servlet项目的搭建 &#x…

正邦科技(第10天)

这里写目录标题 任务一任务二任务三 任务一 下位机报上来的十进制数据进行解析: 360170 固定报文,一个F对应一个字节,温度值,湿度值,烟雾浓度值是十进制转16进制,告警状态需要高低位移位,然后再…

Apple开发者Identifier唯一身份标识创建

1. 选中Identifiers然后点击加号进入创建页面 2.选择要注册的标识类型 选择类型为App然后点击继续 输入应用描述与BundleID并勾选要开启的功能后点击继续 点击注册标识 注册成功后,会在标识列表中看到

Apple开发者macOS设备与描述文件Profile创建完整过程

安装并打开Apple Configurator 新建描述文件 输入macOS平台的描述文件的相关信息,然后选择证书 选择一个可用证书 存储描述文件 存储成功如下: 使用文本编辑器打开刚才保存的描述文件,找到设备名与UDID

MySQL8.3日志文件占用硬盘空间过大,释放方法

执行 reset master; 即可解决问题,我写了个任务,定期执行 执行后目录效果

Vue3学习记录(第一天)

Vue3学习记录_第一天 背景说明记录Vue3实现响应式前端的反射前端对象的属性赋值Vue3响应式实现过程稿前端移除对象的属性 背景 本次学习主要是看视频学习, 没有跟练, 但是很多知识点感觉又容易忘记. 所以通过笔记的方式输出一下. 说明 估计只能自己看懂, 如果能提供一些其他…

ROS学习记录:自定义消息类型

前言 当我们需要传输一些特殊的数据时,且官方的消息包无法满足需求,我们便可以自己定义一个消息类型。 实验步骤 一、在终端输入cd ~/catkin_ws1/src进入工作空间中src目录 二、输入catkin_create_pkg qq_msgs roscpp rospy std_msgs message_generati…

Docker 基础使用(3) 存储卷

文章目录 存储卷的含义存储卷的分类存储卷的作用存储卷的使用存储卷实际使用案例 ---- MySQL灾难恢复存储卷的局限 Docker 基础使用(0)基础认识 Docker 基础使用 (1) 使用流程概览 Docker 基础使用(2) 镜像与容器 Docker 基础使用…

Windows系统电脑本地部署AI音乐创作工具并实现无公网IP远程使用

文章目录 前言1. 本地部署2. 使用方法介绍3. 内网穿透工具下载安装4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在Windows系统电脑上快速本地部署一个文字生成音乐的AI创作工具MusicGPT,并结合cpolar内网穿透工具实现随时随地远程访问使用。 MusicG…

Python 可变长参数的魔法:灵活函数设计的秘密

哈喽,大家好,我是木头左! 什么是可变长参数? 在 Python 中,可变长参数允许你向函数传入任意数量的参数,而无需预先定义它们的个数。这为编写更加灵活和通用的函数提供了可能。可变长参数主要有两种形式&am…

OpenCV的小部件最基本范例

OpenCV也有与PYQT类似的小部件,例如滑块slider。OpenCV可以用与PYQT类似的“信号与槽”方法,也可以在函数中直接查询小部件的值。 import cv2 import numpy as npcv2.namedWindow(Show1) image np.zeros((100, 400, 3), np.uint8) # 创建一个空白内容…

微服务网关Gateway(下)

CSDN 的小伙伴们,大家好呀,我是苍何。 这篇文章我们继续来说下我们项目中用到的微服务网关 Gateway 的技术点。主要涵盖过滤器,限流处理以及黑白名单配置。 过滤器 网关中的过滤器,有点类似 SpringMVC 里面的拦截器 Intercepto…

mysql中 redo日志(上)

大家好。我们知道InnoDB 存储引擎是以页为单位来管理存储空间的,我们进行的增删改查操作其实本质上都是在访问页面。而在真正访问页面之前,需要把在磁盘上的页缓存到内存中的Buffer Pool之后才可以访问。那么我们思考一个问题:如果我们只在内…

【漏洞复现】锐捷校园网自助服务系统 login_judge.jsf 任意文件读取漏洞(XVE-2024-2116)

0x01 产品简介 锐捷校园网自助服务系统是锐捷网络推出的一款面向学校和校园网络管理的解决方案。该系统旨在提供便捷的网络自助服务,使学生、教职员工和网络管理员能够更好地管理和利用校园网络资源。 0x02 漏洞概述 校园网自助服务系统/selfservice/selfservice…

路由黑洞处理

今天BGP基础实验碰到了路由黑洞 BGP承载于IGP之上,BGP路由天生要递归,才能找出口 在E的BGP去A,下一跳只有B,但是流量走了两条路,c和d BGP路由黑洞: 控制层面可达,数据层面不可达; 路由条目在BG…

阿里云搭建物联网平台+MQTT.fx接入阿里云

文章目录 本篇介绍一、阿里云物联网平台搭建二 、MQTT客户端接入阿里云物联网平台总结 本篇介绍 本篇搭建了阿里云物联网平台,使用MQTT.fx接入阿里云,上传温湿度数据 使用到的软件:阿里云、MQTT.fx 一、阿里云物联网平台搭建 首先创建一个物…

【AI大模型】 应用开发基础

目录 迎接 AGI 时代 什么是 AI? AGI 和AIGC 大模型 AI 能干什么? 大模型落地情况综述 Killer App 没有影 AI 原生待证明 成功落地大模型五要素 大模型是怎样工作的? 通俗原理 略深一点的通俗原理 再深一点点 用好 AI 的核心心法…

C#知识|通过ADO.NET实现应用程序对数据库的查询操作。

哈喽,你好啊,我是雷工! 前边学习了通过ADO.NET实现C#应用程序对数据库的增、删、改操作。 接下来接着学习查询操作,以下为学习笔记。 查询返回有两种类型,一种是单行单列的单一结果,一种是结果集,首先了解查询结果是单行单列结果的写法。 01 查询返回单一结果 以前方的…