1.操作流程:

2.vue应用实例使用main.js

import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '@/router/index.js'
import {createPinia} from "pinia";----------------------------------------->导入pinia
import {createPersistedState} from "pinia-persistedstate-plugin";---------------->持久化插件
import App from './App.vue'


const pinia = createPinia();---------------------------------->应用pinia
const persist = createPersistedState();--------------------->
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(pinia);------------------------------------------->
pinia.use(persist);--------------------------------------->应用persist
app.mount('#app')

3.pinia工具类 token.js

//定义store
import {defineStore} from "pinia/dist/pinia";
import {ref} from "vue";


/*
第一个参数: 名字,唯一性
第二个参数: 函数,函数的内部可以定义状态的所有内容


返回值:  函数*/
export const useTokenStore = defineStore('token', () => {

    const token = ref('');

    const setToken = (newToken) => {

        token.value = newToken;
    }

    const removeToken = () => {
        token.value = '';
    }

    return {
        token, setToken, removeToken
    }

},
    {
        persist: true------------------------------------>持久化
    })

4.pinia的实例--------------------------->token登入令牌的存储

import {useTokenStore} from '@/stores/token.js'----------------------------------->导入pinia
const tokenStore = useTokenStore();
import {useRouter} from 'vue-router'
const router = useRouter();
//登入函数调用
const login = async function () {
  let result = await userLoginService(registerData.value);
  //是否记住密码
  if (!jzmi.value) {
    clearPassword();
  }
  if (result.code == 0) {
    //存储token
    tokenStore.setToken(result.data);---------------------------------------->存储token
    console.log(tokenStore.token)
    //跳转到首页
    router.push('/');
    open1();
  } else {
    open4();
  }
}

5.token的方法应用

import request from '@/util/request'
import {useTokenStore} from "@/stores/token.js";
//获取文章分类
export const ArticleCategoryService = function (){
    const tokenStore = useTokenStore();
    console.log(tokenStore.token)
    return request.get('/category'/*{headers: {'Authorization':tokenStore.token}}*/);
}

5.优化,添加axios的请求拦截器

// 请求拦截器
instance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，比如添加请求头、设置token等
        const tokenStore = useTokenStore(); // 假设token保存在localStorage中
        if (tokenStore.token) {
            // 将token添加到请求头中
            config.headers.Authorization = tokenStore.token;----------------token的添加
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);