欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > 前端接收客户端返回的token值使用pinia持久化保存token

前端接收客户端返回的token值使用pinia持久化保存token

2025/7/11 6:01:21 来源:https://blog.csdn.net/2301_79752960/article/details/146990402  浏览:    关键词:前端接收客户端返回的token值使用pinia持久化保存token

1.下载pinia

npm install pinia

2.配置pinia

        在mian.js中 

                加入 import {creatPinia} from 'pinia'

                         const pinia = creatPinia()

                         app.use(pinia)

3.创建token.js文件 持久化存储token

/*** 导入状态管理的工具* 从 'pinia' 库中导入 defineStore 函数,用于创建状态存储* 从 'vue' 库中导入 ref 函数,用于创建响应式数据*/import { defineStore} from 'pinia'
import {ref}  from 'vue'/*
*  @param {string} name - 状态存储的唯一名称,用于在应用中标识改存储
*  @param {Function} options - 一个函数 ,内部定义状态的内容和操作
*  @param {Object} [config] - 可选的配置对象,用于设置装填存储的行为
*  @param {boolean} [config.presist=false] - 是否持久化存储默认为false
*  @returns {Function} - 返回一个用于访问和操作状态存储的函数
*///defineStore 状态管理函数
// 参数1 名字,唯一性
// 参数2 函数 内部定义状态的内容
// 参数3 选项 是否持久化
// 如果不设置该值 浏览器刷新就会销毁
// 返回值 函数export const userTokenStore = defineStore('token',() =>{// 管理状态内容// 1.响应式变量// 定义一个响应式变量token ,初始为空// 用于存储令牌的信息const token = ref('')// 2.定义函数修改tokenconst setToken = (newToken) =>{token.value = newToken    }// 3.移除tokenconst removeToken = () =>{token.value = ''}// 返回一个对象 包含状态和操作状态的函数return {token,setToken,removeToken};// 开启持久化
},{presist:true});

4. 在登录时数据交互保存token

//导入token状态管理工具
import { userTokenStore } from '@/stores/token'// 获得对象
const tokenStore = userTokenStore()// 登录相关接口
const login = async ()=>{let result = await userLoginServiceAPI(registerData.value)console.log(result)ElMessage.success(result.msg ? result.msg : "登录成功");// 将登录者的token值存放到pinia状态管理中// console.log(result.data)tokenStore.setToken(result.data)router.push('/'); // 登录成功后跳转到首页
}

5. 在axios库 发送请求的时候拦截 验证token
 

// 封装请求拦截器,每次请求都携带token值
import { userTokenStore } from '@/stores/token';instance.interceptor.request.use(config =>{// 请求前配置tokenconst tokenStore = userTokenStore();// 判断是否有token值if(tokenStore.token){// 获取token值配置在请求头协议中config.headers.Authorization = tokenStore.token;}// 返回配置信息 return config 会将配置对象返回到 Axios 的请求处理流程中,使得 Axios 可以// 使用这个配置对象来构建和发送实际的 HTTP 请求return config;},err =>{ Promise.reject(err)})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词