作用
存储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中声明持久化存储