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)})
)
