Vue3中的Token失效拦截处理方式

2024-11-2 22:45| 发布者: db4d5a85| 查看: 105| 评论: 0

摘要: 目次Vue3 Token失效拦截处理Vue axios 相应拦截 token失效导致出现多个提示框的总结Vue3 Token失效拦截处理 Token的有效性可以保持一段时间，假如用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求

Vue3 Token失效拦截处理

Token的有效性可以保持一段时间，假如用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报错，所以需要我们做一些处理

1. 在相应拦截器里面拦截这个错误

2. 拦截到后需要做的事：

1）应清撤除过期的用户信息
2）跳转到登录页

[code]// utils/http.js import axios from "axios"; import {useUserStore} from "@/stores/user"; import router from '@/router' const httpInstance = axios.create({ baseURL: 'url', // 基地址 timeout: 5000 // 超时器 }) //拦截器 httpInstance.interceptors.request.use(config => { return config }, e => Promise.reject(e)) //相应器 httpInstance.interceptors.response.use(res => res.data, e => { const userStore = useUserStore() //pinia管理的用户数据 // 401 token失效处理 // 1. 清除本地用户数据 // 2.跳转到登录页 if (e.response.status === 401) { userStore.clearUserInfo() // userStore.userInfo = {} router.push('/login') } return Promise.reject(e) }) export default httpInstance[/code]

Vue axios 相应拦截 token失效导致出现多个提示框的

[code]// 相应拦截器 let isToken=false request.interceptors.response.use((res)=>{ // 没错误返回200 错误·拦截 if (res.data.code ===200) { return res; }else if (res.data.code === 404){ router.push('/login') }else if(res.data.code === 10020){ // 防止失效导致出现多个提示框的解决办法 if(!isToken){ isToken=true window.localStorage.removeItem('user') router.push('/login') setTimeout(()=>{ isToken=false },2000) return Message.warning(res.data.message)&&Promise.reject(res.data.message); } } },) [/code]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/326736nu3.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：vue拦截器及哀求封装代码下一篇：前端监听websocket消息并实时弹出(实例代码)

账号		自动登录	找回密码
密码			立即注册

Vue3中的Token失效拦截处理方式

目次

Vue3 Token失效拦截处理

Vue axios 相应拦截 token失效导致出现多个提示框的

总结

相关分类

站长推荐 /6