开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 其他教程 >  怎么使用vue3+ts+axios+pinia实现无感刷新

怎么使用vue3+ts+axios+pinia实现无感刷新

其他教程   发布日期：2025年03月17日   浏览次数：270次

本篇内容介绍了“怎么使用vue3+ts+axios+pinia实现无感刷新”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

vue3+ts+axios+pinia实现无感刷新

1.先在项目中下载aiXos和pinia

  1. npm i pinia --save
  2. npm install axios --save

2.封装axios请求-----

下载js-cookie

  1. npm i JS-cookie -s
  2. //引入aixos
  3. import type { AxiosRequestConfig, AxiosResponse } from "axios";
  4. import axios from 'axios';
  5. import { ElMessage } from 'element-plus';
  6. import { useUserInfoStore } from '@/stores/modules/UserInfo'
  7. import router from '@/router';
  8. import qs from 'qs';
  9. import Cookie from "js-cookie";
  10. let baseURL = "";
  11. // console.log(process.env.NODE_ENV);//判断环境
  12. if (process.env.NODE_ENV === 'development') {
  13.     baseURL = '/m.api'//后台请求接口地址
  14. } else {
  15.     baseURL = 'http://xxxx.cn:8080';//这里是项目上线后的地址
  16.    
  17. }
  18. declare interface TypeResponse extends AxiosResponse {
  19.     /**
  20.      * 错误号，200表示成功，10006令牌过期
  21.      */
  22.     errno: number,
  23.     /**
  24.      * 返回的信息
  25.      */
  26.     errmsg: string
  27. }
  28.  
  29. //创建axios实例
  30.  
  31. const instance = axios.create({
  32.     baseURL,  // 接口地址
  33.     timeout: 3000,
  34.     headers: {
  35.         "Content-Type": 'application/x-www-form-urlencoded'
  36.     }
  37.  
  38. });
  39.  
  40.  
  41. //添加拦截器
  42. instance.interceptors.request.use((config) => {
  43.     // 在发送请求之前做些什么--给请求头添加令牌token
  44.     (config as any).headers['AdminToken'] = Cookie.get('token')//从cookie中拿token值，
  45. //这里是使用了js-cookie插件。
  46.     // console.log(config, "请求拦截器")
  47.     return config
  48. }, reeor => {
  49.     // 对请求错误做些什么
  50.     return Promise.reject(reeor);
  51. });
  52. // 需要无痛刷新的操作页面
  53. const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
  54. // //响应拦截器
  55. instance.interceptors.response.use(async (response: AxiosResponse) => {
  56.     // 对响应数据做点什么
  57.     let data = response.data;
  58.     let { errno, errmsg } = data;
  59.     console.log(response, "响应拦截器");
  60.     let path = router.currentRoute.value.fullPath;//当前路由路径
  61.     if (10006 === errno) {
  62.         const configData = response.config.data || ''
  63.         // 判断请求类型是否需要无痛刷新，index !== -1则需要无痛刷新
  64.         let index = METHOD_TYPE.findIndex(item => configData.includes(item))
  65.         if (-1 === index) {//需要重新登入获取令牌
  66.             router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
  67.             return
  68.         } else {//需要无痛刷新令牌
  69.             const store = useUserInfoStore();
  70.             const { username, password } = store.LoginInfo//在状态管理里面定义一个loginInfo
  71.             // 1.重新获取令牌
  72.             let loginData = { _gp: 'admin', _mt: 'login', username, password };
  73.             const { errno, errmsg, data } = await post(loginData)//这里是通过async 将异步序列化改为同步
  74.             if (200 == errno) {
  75.                 Cookie.set('token', data)//保存令牌
  76.             } else {
  77.                 router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
  78.                 return Promise.reject({ errno, errmsg, data })
  79.             }
  80.             return instance.request(response.config)
  81.         }
  82.     // ElMessage.error(errmsg);//错误信息
  83.     }
  84.     return data;
  85. }, reeor => {
  86.     console.log(reeor);
  87.  
  88.     return Promise.reject(reeor);
  89. })
  90.  
  91. function get(params?: object): Promise<TypeResponse> {
  92.     return instance.get('', { params });
  93. };
  94. function post(data: object, params?: object): Promise<TypeResponse> {
  95.     return instance.post('', qs.stringify(data), { params });
  96. };
  97.  
  98.  
  99. //暴露实列
  100. export {
  101.     post, get,
  102. }

3.qs.stringify(data)是将请求的数据转成表单格式，如果不需要直接去掉就可以了；

4.重新登录后跳转路由需要设置，不需要可以去掉

5。状态管理--数据

下载持久化工具

  1. npm install pinia-plugin-persistedstate --s

在main.js中配置持久化

  1. //引入数据持久化插件
  2. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
  3. const pinia = createPinia()
  4. pinia.use(piniaPluginPersistedstate);
  5. app.use(pinia)
  1. import { defineStore } from 'pinia'
  2. export const useUserInfoStore = defineStore('UserInfo', {
  3.     state:() => ({
  4.        
  5.         LoginInfo:{
  6.             username:'',
  7.             password:''
  8.         }
  9.       }),
  10.      
  11.       persist:true;//状态存储持久化
  12. })

6.登录页面--存储表单数据，也就是用户名和密码

  1. npm i lodash --s
  2. import Cookies from 'js-cookie';//引入cookie
  3. import * as _ from 'lodash';//防抖节流插件
  4. import {post} from '@/util';
  5. import {useUserInfoStore} from '@/stores/modules/UserInfo' ;//用户信息
  6. import { useRouter,useRoute } from 'vue-router' ;//引入路由
  7. //这里是表单输入的数据
  8. const ruleForm = reactive({
  9.     password: '123456',
  10.     username: 'admin'
  11. });
  12. //请求接口数据
  13. let data = {
  14.     _gp: "admin",
  15.     _mt: 'login',
  16.     ...ruleForm
  17. };
  18.  
  19. let LoginInfo = useUserInfoStore().LoginInfo;//状态管理定义的数据
  20. async function init() {
  21.     await post(data).then((res:any) => {
  22.         let { data: token, errno, errmsg } = res
  23.         if (200 === errno) {
  24.             let time = new Date() //设置过期时间
  25.             time.setTime(time.getTime() + 1000 * 60 * 30)
  26.             Cookies.set('token', token, { expires: time });
  27.             Object.assign(LoginInfo,ruleForm)
  28.             if (route.query.back) { //如果存在参数
  29.              let paths = route.query.back+''//拼接字符串
  30.              console.log(paths);
  31.              if (paths=='/') {
  32. //因为我的home是'/',所有需要判断
  33.                 router.replace('/Surface')//跳转至主页
  34.                 return
  35.              }else{
  36.                 router.replace(paths)//则跳转至进入登录页前的路由
  37.              }
  38.              
  39.            } else {
  40.             router.replace('/Surface')//否则跳转至首页
  41.            }
  42.             
  43.         } else {
  44.             ElMessage.error(errmsg)
  45.         }
  46.     }).catch((err:any) => {
  47.         ElMessage.error('登录异常！')
  48.     })
  49.     let info = {//用户信息请求信息接口数据
  50.         _gp: "admin",
  51.         _mt: 'info',
  52.     }
  53. //下面这个函数是请求用户信息的，不需要可以不写
  54.     await post(info).then((res:any) => {
  55.         let {data} = res
  56.         console.log(data);
  57.         infos(data)
  58.  
  59.     }).catch((err:any)=>{
  60.         ElMessage.error('登录异常！')
  61.     })
  62. }
  63. //防抖节流
  64. const fangdou = _.debounce(init, 1500, {
  65.     leading: true,  // 延长开始后调用
  66.     trailing: false  // 延长结束前调用
  67. })
  68. //移除组件时，取消防抖
  69. onUnmounted(() => {
  70.     fangdou.cancel()
  71. })

7.main.js设置路由守卫

  1. import Cookie from 'js-cookie'
  2. import router from './router'//引入路由
  3.  
  4. //路由守卫
  5. router.beforeEach(async (to, from ) => {
  6.     let tokent:string|undefined = Cookie.get('token')
  7.     if (!tokent && to.path == '/login') {
  8.         return  true
  9.     }
  10.     // 没有登录，强制跳转登录页
  11.     if (!tokent && to.path !== '/login') {
  12.         router.replace({path:'/login',query:{back:to.path}});
  13.     }
  14.     // 防止重复登录
  15.     if (tokent && to.path === '/login') {
  16.         return {
  17.             path: from.path ? from.path : '/Surface'
  18.         }
  19.     }
  20.     return true
  21. })

大概就是这么多了

vue3无痛刷新（无感刷新）

无痛刷新的原理：当token过期后，在响应拦截器通过判断重新进行登入请求

实现过程

在状态管理state中定义一个loginInfo对象用于存储用户的账号和密码

  1. //在状态管理文件中
  2. import { defineStore } from 'pinia'
  3. import Cookies from "js.cookie"
  4. import {post} from '@/http'
  5.  
  6. import router from '@/router';
  7. import { ElMessage } from 'element-plus';
  8. export const useUserStore = defineStore({
  9.   id: "userStore",
  10.   persist: {
  11.     paths:['user']
  12.   },//持久化
  13.   state: () => ({
  14.     loginInfo:{
  15.       username:'', 
  16.       password:''
  17.     }
  18.   }),
  19.   getters: {},
  20.   actions: {
  21.     setUser(user:UserInfo) {
  22.       this.user = user;
  23.     },
  24.     loginOut(){
  25.       const data ={
  26.         _gp:"admin",
  27.         _mt:"logout"
  28.       }
  29.       post({},data).then((res:any)=>{
  30.         let {errmsg,errno} = res
  31.         if(200==errno){
  32.           localStorage.removeItem("userStore")
  33.           Cookies.remove("token")
  34.           router.replace('/login')
  35.           ElMessage.success(errmsg);
  36.         }else{
  37.           ElMessage.error(errmsg);
  38.         }
  39.       }).catch(res=>{
  40.       console.log(res,"退出登入失败");
  41.       })
  42.     }
  43.   }
  44. })

登入页面中，在登入请求成功后将用户的账号和密码存储在状态管理

  1. //在登入页面文件中
  2. const data = { ...ruleForm, _gp: "admin", _mt: "login" }//转换成字符串
  3. post({}, data).then(res => {
  4.     let { data: token, errmsg, errno } = res as any;//获取登录状态
  5.     if (200 == errno) {//登录成功的判断
  6.         ElMessage.success("登录成功!")//消息提示登录成功
  7.         let now = new Date();//获取当前时间
  8.         now.setTime(now.getTime() + 1000 * 60 * 30);//转成时间类型
  9.         Cookies.set("token", res.data, { expires: now })//获取token存到cookie
  10.         Object.assign(store.loginInfo, ruleForm)//将账号密码存储到状态管理
  11.         return Promise.resolve(token)
  12.     } else {
  13.         ElMessage.error(errmsg);//登入失败
  14.         return Promise.reject(errmsg)
  15.     }
  16. })

3.在http中，先定义一个数组变量，该数组存放需要无痛刷新的操作如：删除、添加、编辑

4.在响应拦截器中，判断10006是否等于errno，如果相等说明令牌过期了，否则没过期

5.令牌过期，获取接口请求数据在定义的数组中查找判断请求类型是否需要无痛刷新

6.index===-1则表示在数组中没有找到也就不需要无痛刷新，直接跳到登入页面进行登入

7.index！==-1则表示需要无痛刷新，将状态管理中存储的用户账号和密码解构出来，进行登入接口请求从而达到重新获取令牌，进而达到不需要进入登入页面就可以进行登入请求也就达到无痛刷新的效果

  1. //在封装的http文件中
  2. import axios, { type AxiosResponse } from 'axios';
  3. import qs from 'qs'
  4. import Cookies from "js.cookie"
  5. import router from '@/router';
  6. import { ElMessage } from 'element-plus';
  7. import { useUserStore } from '@/stores/admin';
  8.  
  9. declare interface TypeResponse extends AxiosResponse {
  10.     url(url: any): unknown;
  11.     [x: string]: any;
  12.     /**
  13.      * 错误号，200表示成功，10006令牌过期
  14.      */
  15.     errno: number,
  16.     /**
  17.      * 失败返回的消息
  18.      */
  19.     error: string,
  20.     /**
  21.      * 成功后返回的消息
  22.     */
  23.     errmsg: string
  24.  
  25. }
  26. let baseURL = ''
  27.  
  28. if (process.env.NODE_ENV === "development") {
  29.     baseURL = '/m.api'
  30. } else {
  31.     baseURL = "http://zxwyit.cn:8080/m.api"//上线后的路径
  32. }
  33.  
  34. const instance = axios.create({//创建实例
  35.     baseURL,
  36.     headers: { "content-type": "application/x-www-form-urlencoded" }
  37. })
  38.  
  39. // 请求拦截器
  40. instance.interceptors.request.use(function (config) {
  41.     if (config.headers) {
  42.         config.headers['AdminToken'] = Cookies.get("token") + ''
  43.     }
  44.     return config
  45. }, function (error) {
  46.     console.error('请求错误', error)
  47.     return Promise.reject(error)
  48. }
  49. )
  50. // 无痛刷新的原理：当token过期后，在响应拦截器通过判断重新进行登入请求
  51. // 实现过程：
  52. // 1.在状态管理state中定义一个loginInfo对象用于存储用户的账号和密码
  53. // 2.登入页面中，在登入请求成功后将用户的账号和密码存储在状态管理
  54. // 3.在http中，先定义一个数组变量，该数组存放需要无痛刷新的操作如：删除、添加、编辑
  55. // 4.在响应拦截器中，判断10006是否等于errno，如果相等说明令牌过期了，否则没过期
  56. // 5.令牌过期，获取接口请求数据在定义的数组中查找判断请求类型是否需要无痛刷新
  57. // 6.index===-1则表示在数组中没有找到也就不需要无痛刷新，直接跳到登入页面进行登入
  58. // 7.index！==-1则表示需要无痛刷新，将状态管理中存储的用户账号和密码解构出来，
  59. // 进行登入接口请求从而达到重新获取令牌，进而达到不需要进入登入页面就可以进行登入请求也就达到无痛刷新的效果
  60.  
  61. // 需要无痛刷新的操作页面
  62. const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
  63. // 响应拦截器
  64. instance.interceptors.response.use(async function (response) {
  65.     let data = response.data//强解
  66.     let { errno, errmsg } = data//结构赋值
  67.     let path = router.currentRoute.value.fullPath//获取路径
  68.     console.log(errno,'errno');
  69.     
  70.     if (10006 == errno) {
  71.         // 获取接口请求数据
  72.         const configData = response.config.data || ''
  73.         // 判断请求类型是否需要无痛刷新，index !== -1则需要无痛刷新
  74.         let index = METHOD_TYPE.findIndex(item => configData.includes(item))
  75.         if (-1 === index) {//需要重新登入获取令牌
  76.             router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
  77.             return
  78.         } else {//需要无痛刷新令牌
  79.             const store = useUserStore();
  80.             const { username, password } = store.loginInfo//在状态管理里面定义一个loginInfo
  81.             // 1.重新获取令牌
  82.             let loginData = { _gp: 'admin', _mt: 'login', username, password };
  83.             const { errno, errmsg, data } = await post(loginData)//这里是通过async 将异步序列化改为同步
  84.             if (200 == errno) {
  85.  
  86.                 Cookies.set('token', data)//保存令牌
  87.             } else {
  88.         console.log(55);
  89.  
  90.                 router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
  91.                 return Promise.reject({ errno, errmsg,data})
  92.             }
  93.             return instance.request(response.config)
  94.         }
  95.     }
  96.     return data
  97. }, function (error) {
  98.     console.error('响应错误', error)
  99.     return Promise.reject(error)
  100. }
  101. )
  102. function get(params?: object): Promise<TypeResponse> {
  103.     return instance.get("", { params })
  104. }
  105. function post(data: object, params?: object): Promise<TypeResponse> {
  106.     return instance.post("", qs.stringify(data), { params })
  107. }
  108.  
  109. /**
  110.  * 富文本框图片上传请求
  111.  */
  112. export function upload(data: object): Promise<TypeResponse> {
  113.     return instance.post("http://192.168.1.188:8080/upload/admin", data);
  114. }
  115.  
  116. export { get, post }

以上就是怎么使用vue3+ts+axios+pinia实现无感刷新的详细内容，更多关于怎么使用vue3+ts+axios+pinia实现无感刷新的资料请关注九品源码其它相关文章！

相关热词： 使用实现刷新
上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：Go语言与阿里云接口对接的性能优化技巧

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1