前端接收客户端返回的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.定义函数修改token
    const setToken = (newToken) =>{
        token.value = newToken    
    }

    // 3.移除token
    const 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 =>{
        // 请求前配置token
        const tokenStore = userTokenStore();
        // 判断是否有token值
        if(tokenStore.token){
            // 获取token值配置在请求头协议中
            config.headers.Authorization = tokenStore.token;
        }
        // 返回配置信息 return config 会将配置对象返回到 Axios 的请求处理流程中，使得 Axios 可以// 使用这个配置对象来构建和发送实际的 HTTP 请求
        return config;
    },
    err =>{ Promise.reject(err)}

)