vue3:六、封装token请求

最新推荐文章于 2025-04-23 20:17:05 发布
最新推荐文章于 2025-04-23 20:17:05 发布
阅读量751 收藏 9
点赞数 24
分类专栏： VUE3-TP8-Element 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46001736/article/details/146005509
版权

一、建立文件

通过之前的案例，在工具文件夹utils下建立token.js文件

二、写入方法

1、初步写入方法

根据缓存localStorage的方法对token进行设置，获取，删除

注：这里的‘token’是固定的变量，但根据实际需要，如果将其设置为一个变量，就可以更好的进行维护以及使用

 2、将名称设置为变量

设置一个变量，然后将每一个名称替换成这个变量

3、设置超时处理

正常如果不对这个缓存进行处理，那么就会一直保存在浏览器，可能就会出现很多错误

①定义变量

const TokenExpireKey = 'user_token_expire'

②设置token-设置过期时间

  • 先设置固定的超时时间expireTimeInMinutes，这里设置为30分钟
  • 获取当前时间+总的可以超时的时间
  • 将获取到超时时间存入缓存

 

③获取token-判断是否超时

获取当前时间以及存入缓存中的超时时间（

最低0.47元/天 解锁文章
6.vue3项目（六）：登录登出功能：登录后获取token，登出实现，进度条效果，路由鉴权，真实接口替换mock接口
鹏哥哥Aaa
11-14 720
登录登出功能：登录后获取token，登出实现，进度条效果，路由鉴权，真实接口替换mock接口
Vue项目实战：优雅封装Axios请求（含完整代码示例）
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
02-15 8131
统一的请求管理和错误处理简洁的API调用方式更好的代码维护性和扩展性方便切换开发/生产环境根据实际项目修改状态码判断逻辑替换Element UI组件为你使用的UI库完善TypeScript类型定义（推荐）希望这篇实战指南能帮助你更好地组织Vue项目中的网络请求！如果有任何问题欢迎在评论区交流讨论。#Vue #Axios #前端工程化 #网络请求封装。
在Vue中，Token封装
蒋小姐的博客
12-16 1008
定义token和user字符串 封装setToken、getToken、removeToken以及getUser函数（获取用户信息） 设置token和user（用户信息）--在登录成功之后设置并跳转到首页，必须传入登录之后返回的token和用户资料 获取token 移除token--退出登录时调用并跳转到首页或登录页 获取用户信息--有需要时封装 //1.定义token和user字符串 const TokenKey = 'merchantToken'; const USER = 'user...
Vue 3中如何封装API请求：提升开发效率的最佳实践
最新发布
2301_76849350的博客
04-23 658
在现代前端开发中，API请求是不可避免的一部分，尤其是与后端交互时。随着Vue 3的广泛应用，如何高效地封装API请求，既能提升代码的可维护性，又能确保代码的高复用性，成为了很多开发者关注的话题。 在本文中，我将详细讲解如何在Vue 3项目中封装API请求，让你在实现功能时更加高效，代码更清晰，也能提升项目的可维护性和扩展性。
vue中token封装
seeeeeeeeeee的博客
06-24 528
创建auth.js文件。 //token封装 //取token export function getToken(){ return sessionStorage.getItem("token") } //存token 放一个形参接收传过来的token存 export function setToken(token){ return sessionStorage.setItem("token",token) } //删token export function removeToken()
vue封装axios（token）
weixin_62328829的博客
01-14 863
src目录下新建 api 文夹并新建 index.js 文件。main.js中使用。
Vue3获取地址栏token
m0_67372185的博客
12-07 2230
Vue3获取地址栏参数token，存放到浏览器中，再放到请求头去请求参数
vue3：axios封装与使用
sunluyi的博客
03-16 6188
1、npm安装 cnpm install axios -S cnpm install qs -S 2、封装axios.js //router import router from "../router/index.js"; //引入路由对象 import { Toast } from 'vant'; // 提示框 // axios import axios from 'axios' import qs from "qs"; import { baseURL } from './common.j.
【uni-app+Vue3】 API请求封装：让接口调用更便捷
共同学习，共同成长
07-10 4831
为了方便开发，我们可以进行API请求的解耦和封装，以便在多个页面中复用，并且可以统一处理错误信息等问题，提高开发效率和代码质量。
vue3+vite 封装axios请求
bsefef的博客
02-23 1348
vue3+vite 封装axios请求 安装axios 创建axios实例 封装请求方式 封装请求接口 vue中调用 安装axios npm install axios 创建axios实例 // http/index.js import axios from 'axios' import { ElLoading, ElMessage } from 'element-plus'; //创建axios的一个实例 var instance = axios.create({ base
vue3实现登录获取token并自动刷新token进行JWT认证
学而思(xiejava的blog)
10-10 2477
在《django应用JWT(JSON Web Token)实战》介绍了如何通过django实现JWT，并以一个具体API接口实例的调用来说明JWT如何使用。本文介绍如何通过vue3的前端应用来使用JWT认证调用后端的API接口，实现一下的登录认证获取JWT进行接口认证。
【vue实战项目】通用管理系统：封装token操作和网络请求
BugMan的博客
11-14 1385
一文详解前端该如何合理的封装token操作和网络请求操作，让其变得具有最合理的复用性。
vue cli3 axios封装(拦截添加token，自定义方法)
Whales_w的博客
01-28 911
vue cli3 axios封装(拦截添加token，自定义方法)
vue3实现登录和token验证
qq_35624605的博客
07-18 1769
配置用户默认标识和清除用户信息。
vue2项目封装axios及通过vuex进行状态管理及存储token
qq_35214930的博客
02-17 684
vue2项目封装axios及通过vuex进行状态管理及存储token。
vue3中，js-cookie的使用 & token之获取token-getToken()、存储token-setToken()、移除token-removeToken()
weixin_44867717的博客
03-27 1356
【代码】vue3中，js-cookie的使用 & token之获取token-getToken()、存储token-setToken()、移除token-removeToken()
【Vue3】Axios简易二次封装+token+跨域问题+接口同步调用使用。
Lin_Yu_的博客
11-10 2635
Vue中Axios简易二次封装+token+跨域问题+接口同步调用使用。数据返回promise的情况分析。
Vue3移动端项目使用vuex处理用户token
weixin_62918410的博客
10-25 1721
Vue3移动端项目使用vuex处理用户token
Vue3---请求拦截器携带token
weixin_52053631的博客
07-11 2741
Token作为用户标识，在很多个接口中都需要携带Token才可以正确获取数据，所以需要在接口调用时携带Token。另外，为了统一控制采取请求拦截器携带的方案。可以在接口正式发起之前对请求参数做一些事情，通常Token数据会被注入到请求header中，格式按 照后端要求的格式进行拼接处理。为什么要在请求拦截器携带Token?
uniapp vue3 接口请求带token封装
05-12
可以在 `uni-app` 中使用 `axios` 库进行接口请求，并且可以在请求头中添加 `token`。 首先需要安装 `axios` 库： ```bash npm install axios --save ``` 然后在需要使用的地方引入： ```javascript import axios from 'axios' ``` 下面是一个基本的 `axios` 请求封装： ```javascript const request = axios.create({ // 创建 axios 实例 baseURL: 'https://api.example.com', // 设置请求的 base url timeout: 5000, // 设置请求超时时间 }) // 请求拦截器 request.interceptors.request.use( config => { const token = uni.getStorageSync('token') // 从本地缓存中获取 token if (token) { // 如果 token 存在则在请求头中添加 token config.headers.Authorization = `Bearer ${token}` } return config }, error => { console.log(error) return Promise.reject(error) } ) // 响应拦截器 request.interceptors.response.use( response => { return response.data }, error => { console.log(error) return Promise.reject(error) } ) export default request ``` 在上面的代码中，我们创建了一个 `axios` 实例，并设置了请求的 `baseURL` 和超时时间。我们还添加了一个请求拦截器，在请求头中添加了 `token`。可以看到，我们使用了 `uni.getStorageSync('token')` 方法从本地缓存中获取了 `token`。在响应拦截器中，我们只返回了响应数据的 `data` 属性。 使用封装好的 `axios` 请求： ```javascript import request from '@/utils/request' request.get('/example').then(response => { console.log(response) }).catch(error => { console.log(error) }) ``` 这样我们就可以在 `uni-app` 中使用 `axios` 库进行接口请求，并且在请求头中添加 `token` 了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

25号底片~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值