前端pinia

作用

存储token，因为登录后产生的token只存在于登录页面，而其他页面没有token，所以在请求时也不能携带token。

图解

实现流程

安装pinia

npm install pinia

在main.js中导入并使用pinia

import {createPinia} from 'Pinia'

const pinia=createPinia();
app.use(pinia)

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

//定义store
import {defineStore} from 'pinia'
import { ref } from 'vue'
// 第一个参数：名字，唯一值
// 第二个参数：函数，函数内部可以定义状态的所有内容
// 返回值：函数
export const useTokenStore = defineStore('token',()=>{
    //定义状态内容

    //1.响应式变量
    const token = ref('')

    //2.定义一个函数，修改token的值
    const setToken=(newToken)=>{
        token.value=newToken
    }
    
    //3.函数移除token的值
    const removeToken =()=>{
        token.value=''
    }
    return{
        token,setToken,removeToken
    }
},{
        persist:true//持久化存储
});

在登录页面导入pinia，并将登录后获得的token存入pinia中

import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();

//把得到的token存储到pinia中
    tokenStore.setToken(result.data);

在api中的js文件

import{useTokenStore} from '@/store/token.js'

 const tokenStore = useTokenStore();
    
    return request.get('/category',{headers:{'Authorization':tokenStore.token}})

token与pinia结合使用的流程

登录后产生一个token

将token存入到pinia中

每次请求都去pinia中取出token一起发送过去(在请求拦截器中配置）

配置pinia的持久化插件

安装persist   

npm install pinia-persistedstate-plugin

在main.js中

import {createPersistedState} from'pinia-persistedstate-plugin’
const persist = createPersistedState()
pinia.use(persist)

在token.js中声明持久化存储