vue使用Pinia实现不同页面共享token

news2025/5/19 21:38:28

文章目录

一、概述
二、使用步骤
- 安装pinia
- 在vue应用实例中使用pinia
- 在src/stores/token.js中定义store
- 在组件中使用store
- - 登录成功后，将token保存pinia中
  - 向后端API发起请求时，携带从pinia中获取的token
三、参考资料

一、概述

Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态
在这里插入图片描述

二、使用步骤

安装pinia

npm install pinia

在vue应用实例中使用pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

在这里插入图片描述

在src/stores/token.js中定义store

import { defineStore } from "pinia";
import {ref} from 'vue';

/*
    defineStore参数描述：
        第一个参数：给状态起名，具有唯一性
        第二个参数：函数，可以把定义该状态中拥有的内容

    defineStore返回值描述：
        返回的是一个函数，将来可以调用该函数，得到第二个参数中返回的内容
*/
export const useTokenStore = 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
    }
}
)

在组件中使用store

登录成功后，将token保存pinia中

//导入token状态
import { useTokenStore } from '@/stores/token.js'
//调用useTokenStore得到状态
const tokenStore = useTokenStore();

//保存token
    tokenStore.setToken(result.data)

在这里插入图片描述

向后端API发起请求时，携带从pinia中获取的token

在article.js中导入@/stores/token.js, 在发起查询文章分类列表的时候把token通过请求头的形式携带给服务器

//导入@/stores/token.js
import { useTokenStore } from '@/stores/token'


//文章分类列表查询
export const articleCategoryListService = () => {
    //获取token状态
    const tokenStore = useTokenStore()
    //通过请求头Authorization携带token
    return request.get('/category', { headers: { 'Authorization': tokenStore.token } })
}