网站模板的缺点,网站建设分为,19寸 网站做多大,企业做网站公司排名口碑为了跨组件传递JWT令牌#xff0c;我们就会利用Pinia状态管理库#xff0c;它允许跨组件或页面共享状态。 使用Pinia步骤#xff1a; 安装pinia#xff1a;cnpm install pinia 在vue应用实例中使用pinia 在src/stores/token.js中定义store 在组件中使用store 1.在main.js文…为了跨组件传递JWT令牌我们就会利用Pinia状态管理库它允许跨组件或页面共享状态。 使用Pinia步骤 安装piniacnpm install pinia 在vue应用实例中使用pinia 在src/stores/token.js中定义store 在组件中使用store 1.在main.js文件导入pinia 这里因为Pinia是默认内存存储刷新浏览器会丢失数据我们使用pinia内的Persist插件就可以将Pinia中的数据持久化存储。 为了使用persist我们需要安装persistcnpm install pinia-persistedstate-plugin然后再pinia中使用persist并且需要再main.js导入一下。 import ./assets/main.scssimport { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vue
import router from /router
import { createPinia } from pinia
import { createPersistedState } from pinia-persistedstate-pluginconst app createApp(App);
//创建createPinia()函数实例
const pinia createPinia();
const persist createPersistedState();
pinia.use(persist)
app.use(pinia)
app.use(router)
app.use(ElementPlus);
app.mount(#app)
2.定义store状态
其实无外乎就是使用defineStore()方法在方法内部分为两个参数来写 第一个参数名字确保唯一性。 第二个参数函数其内部可以定义状态的所有内容其内部先创建一个响应式数据然后设置获取数据以及删除数据的方法最后返回数据以及方法。 加上Persist插件就可以将Pinia中的数据持久化存储。 //定义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是默认内存存储刷新浏览器会丢失数据使用Persist插件就可以将Pinia中的数据持久化存储
}
);
这样我们就可以调用定义的useTokenStore来使用pinia了。
eg文章分类列表渲染 我们的目的是想要通过pinia来跨组件使用token请求头内的JWT令牌将其封装给请求头。 我们首先再Login.vue文件中把得到的token存储到pinia中
//导入store状态
import { useTokenStore } from /stores/token.js;
//导入路由器
import { useRouter } from vue-router;
const tokenstore useTokenStore();
const router useRouter();
//表单数据校验
const login async(){let result await userLoginService(registerData.value);// alert(result.msg ? result.msg : 登录成功); ElMessage.success(result.msg ? result.msg : 登录成功);//将得到的token存储到pinia中tokenstore.setToken(result.data);//通过路由跳转首页router.push(/);
}
然后再article.js中定义请求函数
import request from /utils/request.js
import { useTokenStore } from /stores/token.js;export const ArticleCategoryListService (){const tokenStore useTokenStore();//在pinia中定义的响应式数据不需要加.value才能使用数据return request.get(/category,{headers:{Authorization:tokenStore.token}});
} 但是这样我们需要将剩下的请求函数都要传递JWT令牌代码会很繁琐这个时候我们就可以添加请求拦截器来使用回调函数来发送。 添加请求拦截器
在request.js文件中添加请求拦截器
import { useTokenStore } from /stores/token.js;
//添加请求拦截器
instance.interceptors.request.use((config){//请求前的回调const tokenStore useTokenStore();if(tokenStore.token){//通过config调用headers获取请求头在调用Authorization将JWT令牌存放到内部以此来添加统一的请求头config.headers.Authorization tokenStore.token;}return config;},(err){//请求错误的回调Promise.reject(err);//异步的状态转化成失败的状态}
)
export default instance;
修改article.js文件的请求函数
import request from /utils/request.jsexport const ArticleCategoryListService (){return request.get(/category);
}
