token的本地存储--请求拦截器（vue项目）

已于 2023-04-05 21:29:45 修改
阅读量723 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue的知识点整理 文章标签： vue.js 前端
于 2023-04-05 17:25:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ating_ing/article/details/129970836

1、由于token是后端发送过来的一个唯一身份标识，在一次登录后想要在下次打开网页时自动登录上去，就需要把这个token存储在本地，在挂载的时候浏览器拿着这个token去向服务器发生请求，获取用户信息

下面的代码就是把在本地vuex里面放的token通过放在请求头的方式带过去保存起来。每次发起请求的时候就会带上这个请求头的token，后台通过判断这个token进行相应相应的数据

 可以看见发的请求里面确实带了token参数

2、 在登录的时候把token进行持久化保留处理（注意：vuex每次刷新里面的数据就会消失，所以通过这种方式保留）

 

3、下面是vuex仓库里面的三连环【获取用户信息的】

（导入api请求:后台写好的进行调用；state进行拿取token操作，在登录的时候token被保存在本地，然后state直接获取，所以一开始是空的）

 （actions方法：获取用户的数据）

 在相应的组件里面替换信息

《Uniapp-Vue 3-TS 实战开发》构建HTTP请求拦截器
前端-尔嵘
04-10 430
定义了一个名为的拦截器对象，它包含一个invoke方法。invoke方法在每次请求被拦截时触发，接收一个options参数，类型为，这个参数包含了本次请求的所有配置信息，我们可以在这个方法中对这些配置进行修改。result: T// 2.2 添加类型，支持泛型//1.返回Promise对象// 请求处理逻辑})定义了一个名为http的函数，它是对的封装。通过泛型<T>支持不同类型的响应数据。函数返回一个Promise对象，这样可以使用。
vue生成token并保存到本地存储中
12-12
首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分，通过token认证和token设置，后端会有一个接口传给前台： http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去生成一个token 这里的client_id相当于用户名，client_key相当于密码，这样后台会生成一个client_token,我们需要把这个token保存到客户端中。 前端的资源一般放在另外的服务器中，这样后台需要进行进行跨域操作，在php代码中增加头文件
本地存储关于token
m0_60684417的博客
11-19 986
const TOKEN_KEY = 'TOTIAO_TONKEN' export default new Vuex.Store({ state: { // 初始化数据 用户数据 包含token等数据 // user: window.localStorage.getItem(TOKEN_KEY) user: JSON.parse(window.localStorage.getItem(TOKEN_KEY)) // 设置token }, // 通过mu...
Vue中Token存储那点事儿：从localStorage到内存的避坑指南
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
06-14 960
大家好，我是小杨，一个写了6年Vue还在踩坑的前端老司机。今天咱们聊聊一个看似简单却暗藏玄机的话题——Token存储。这玩意儿就像你家的钥匙，存对了地方安全又方便，存错了地方……嘿嘿，等着被老婆骂吧（别问我怎么知道的）。
本地存储 (vuex，token持续有效)
Sunshine_GirlXue的博客
11-10 730
本地存储 (vuex，token持续有效) 我这里用的是封装的loca.js(localStorage的方法) 文件js放在src的里面和app.vue同级 export default{ //存储 save(key,val){ localStorage.setItem(key,JSON.stringify(val)) ...
token和本地存储
Will_Season的博客
03-03 444
setItem('token',res.token)//将token保存在localStorage中。.getItem('token')//将获取本地缓存。
vuex对于token进行存储
m0_63757700的博客
12-11 2243
token存储
vue-resouce设置请求头的三种方法
08-29
Vue Resource 设置请求头的三种方法 在 Vue 项目中，设置请求头是非常重要的，因为它可以携带一些必要的...在 Vue 项目中，我们可以使用三种方法来设置请求头：在 Vue 实例中设置、全局设置请求头和在拦截器中设置。
vue3前端开发-小兔鲜项目-路由拦截器增加token的携带
yrldjsbk的博客
07-25 693
实际开发中，很多业务接口的请求，都要求必须是登录状态！为此，这个token信息就会频繁的被加入到了请求头部信息中。request请求头内既然需要频繁的携带这个token.我们就可以把它配置一下。题外话：每个公司，都有自己公司特殊定义的要求格式。所以，到时候询问后端开发人员，就知道，该如何拼接token字符串了。如图，从pinia中获取这个token。然后安装后端工程师的要求去拼接token。如图，所示，无论是哪个接口调用，都自动拼接带着这个拼接完成后的token信息了。1：修改一下，路由拦截器的代码内容。
vue下axios拦截器token刷新机制的实例代码
11-21
它解析存储在本地存储（localStorage）中的token，比较其`expires_time`与当前时间。如果当前时间大于等于`expires_time`，则返回`true`表示token过期。 3. **订阅机制**：`refreshSubscribers`数组用于保存那些因...
VUE项目axios请求头更改Content-Type操作
10-15
6. 请求拦截器中的token处理：在请求拦截器中，可以根据localStorage中的token自动设置请求头中的Authorization字段，这样就无需在每次发起请求时手动添加token。 7. 错误处理：在axios的Promise处理中，.then和....
单点登录token存本地
weixin_44239362的博客
05-14 528
1、认证中心获取token存储在本地 -> 要进入子系统时，使用postmessage向子系统发送token，并存储在子系统的localstorage中。注意：这里使用window.onmessage，用window.addEventListener会导致重复触发。2、子系统的public文件夹下创建settoken.html，用来存储token。// 监听跨域跳转获取新token存入localStorage实现获取访问令牌。// 告诉上层 window，已保存token，可以开始跳转了。
Vue3 用Vuex.Store 保存token和用户信息
Admans的专栏
11-27 5025
如果想持久保存，可以使用。
浏览器缓存、本地存储、Cookie、Session、Token
luemeon的博客
11-24 2485
=
如何把token存储到本地和headers中
qq_43405603的博客
09-08 2232
// 发送登录请求 $.ajax({ url: '/app/login/login_pwd', type: 'post', data: {'mobile':logphone,'password':logpwd}, dataType: 'json', headers:{token:localStorage.getItem('Mytoken')?localStora...
10、springboot3 vue3开发平台-前端-elementplus， axios配置及封装使用， 包含token 存储
qq_51355375的博客
08-06 1270
elementplus 按需导入， axios 封装， 响应数据处理， 服务代理， token存储，pinia持久化
VUE3登录后保存token，使用LocalStroge
qq_29272181的博客
11-07 5008
1.登录成功后，后端会返回一个token。拿到这个token后，使用Localstroge进行保存。代码如下：在login.vue中： <template> <div class="Login"> <h1>用户登录</h1> <br/> <label>用户名：</label> <input type="text" v-model="username" placeholder="请输入
vue3前端开发-小兔鲜项目-使用pinia插件完成token的本地存储
yrldjsbk的博客
07-25 651
实际业务开发中，token是一个表示着用户登录状态的重要信息，它有自己的生命周期。不能跟着pinia。因为pinia是基于内存设计的模块。可以使用官方提供的插件来帮助我们快速实现localstorage的操控同步。当然了你也可以自己手写代码，去完成这个操作存储的流程。如图，增加这个配置，为true。你可以自己根据个人的项目结构，自己选择。我们使用的是npm安装了。2：然后就在之前的pinia定义代码内增加一句话就行了。如图所示，确实是，同步操作成功了。完成后可以看见出现在了里面，有版本信息。
简述vue2中token登陆时的存储问题
weixin_48633811的博客
10-10 2369
vue2中token登陆时的存储问题
vue-admin-template网络请求拦截
06-05
<think>我们正在使用vue-admin-template项目，并需要配置axios请求拦截器。根据引用[2]，我们知道在vue-admin-template中已经使用了axios进行数据请求（开发环境）。通常，我们会创建一个axios实例，并在该实例上添加拦截器。步骤：1.找到项目中初始化axios的地方。在vue-admin-template中，通常会在`src/utils/request.js`中创建axios实例并配置拦截器。2.如果没有该文件，我们可以创建一个，并在其中配置拦截器，然后在需要的地方引入这个实例。根据引用[3]和[4]，项目结构遵守一定的规范。我们会在src目录下进行操作。具体实现：在`src/utils/request.js`中（如果不存在则新建），我们可以编写如下代码：```javascriptimportaxiosfrom'axios'//创建axios实例constservice=axios.create({baseURL:process.env.VUE_APP_BASE_API,//根据环境变量设置基础URL，在.env文件中配置timeout:5000//请求超时时间})//请求拦截器service.interceptors.request.use(config=>{//在发送请求之前可以做些什么//例如，如果项目使用token，则可以从store中获取token并添加到请求头//假设我们将token存储在localStorage中，键为'token'consttoken=localStorage.getItem('token')if(token){config.headers['Authorization']=`Bearer${token}`}returnconfig},error=>{//对请求错误做些什么console.log(error)//fordebugreturnPromise.reject(error)})//响应拦截器service.interceptors.response.use(response=>{//对响应数据做点什么constres=response.data//这里可以根据后端返回的状态码进行判断，比如状态码不是20000，则认为是错误if(res.code!==20000){//可以弹出一个错误提示console.error('请求错误：',res.message||'Error')returnPromise.reject(newError(res.message||'Error'))}else{returnres}},error=>{//对响应错误做点什么console.log('err'+error)//fordebugreturnPromise.reject(error)})exportdefaultservice```然后，在项目中需要发起请求的地方，我们不再直接使用axios，而是使用这个封装好的service。例如，在API模块中（通常放在`src/api`目录下）：```javascriptimportrequestfrom'@/utils/request'exportfunctiongetInfo(token){returnrequest({url:'/user/info',method:'get',params:{token}})}```这样，每次请求都会经过请求拦截器和响应拦截器。另外，根据引用[4]，我们注意到项目可能会使用mock数据。在请求拦截器中，我们也可以根据环境变量判断是否使用mock，但通常mock是在开发环境中通过引用mock文件（如引用[4]中的代码）来实现的，所以拦截器中不需要特别处理。注意事项：-在请求拦截器中，我们通常添加认证信息（如token）到请求头。-在响应拦截器中，我们根据后端返回的数据结构进行统一处理，例如处理错误状态码。如果vue-admin-template已经有一个`request.js`文件，并且已经配置了拦截器，那么我们可以直接修改该文件，添加我们需要的逻辑。最后，确保在`main.js`中引入的axios实例是我们封装好的这个，但通常在api模块中引入，所以不需要在main.js中全局引入。引用：-关于axios的配置和代理设置（引用[2]）已经在vue.config.js中配置了跨域代理，这与拦截器是独立的，不会冲突。-项目结构规范（引用[3]）指导我们在views中写页面，而api模块则放在src/api目录。因此，按照以上步骤即可实现axios请求拦截器。</think> 基于 `vue-admin-template` 实现 Axios 请求拦截器的完整配置步骤如下： ### 1. **定位 Axios 实例文件** 在 `src/utils/` 目录中找到 `request.js` 文件。这是封装 Axios 的核心文件，所有网络请求都通过这个文件发出。 ### 2. **配置请求拦截器** 在 `request.js` 中添加请求拦截逻辑： ```javascript // src/utils/request.js import axios from 'axios' // 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 基础 URL timeout: 5000 // 超时时间 }) // ========= 请求拦截器 ========= service.interceptors.request.use( config => { // 在发送请求前统一处理 // 示例1：添加认证 token const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } // 示例2：转换 POST 数据格式 if (config.method === 'post') { config.data = JSON.stringify(config.data) config.headers['Content-Type'] = 'application/json' } return config // 必须返回处理后的配置 }, error => { return Promise.reject(error) // 处理错误 } ) export default service ``` ### 3. **配置响应拦截器**（可选） 在同一个文件中添加响应拦截逻辑： ```javascript // ========= 响应拦截器 ========= service.interceptors.response.use( response => { // 对响应数据统一处理 const res = response.data // 示例：根据业务状态码处理 if (res.code !== 20000) { // 20000 是 vue-admin-template 默认的成功码 alert(`请求错误: ${res.message}`) return Promise.reject(new Error(res.message)) } return res }, error => { // 统一处理 HTTP 错误状态码 if (error.response.status === 401) { router.push('/login') // token 过期跳转登录 } return Promise.reject(error) } ) ``` ### 4. **跨域代理配置**（如需要） 在 `vue.config.js` 中配置代理（开发环境）[^2]： ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://your-api-domain.com', // 后端地址 changeOrigin: true, pathRewrite: { '^/api': '' // 去除请求路径中的 /api } } } } } ``` ### 5. **启用 Mock 数据**（如需要） 在 `main.js` 中添加动态 Mock 支持[^4]： ```javascript // main.js if (process.env.NODE_ENV === 'development' && process.env.MOCK === 'true') { require('./mock') // 加载 mock/index.js } ``` ### 使用示例 在 API 模块中直接使用封装好的请求： ```javascript // src/api/user.js import request from '@/utils/request' export function login(data) { return request({ url: '/api/login', // 会被代理规则处理 method: 'post', data }) } ``` ### 关键说明 1. **拦截器执行顺序**： ```mermaid graph LR A[请求发起] --> B(请求拦截器) --> C[服务器] C --> D(响应拦截器) --> E[业务代码] ``` 2. **内容类型处理**： - 默认使用 `application/x-www-form-urlencoded` - 通过拦截器可自动转换为 `application/json` 3. **环境变量**： - `.env.development` 中设置 `VUE_APP_BASE_API` - `.env.production` 中设置生产环境 API 地址
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值