旅游网站页面设计,北京远程时代网站建设,湖南批量出品机,51制作工厂网站目录 总结一、步骤1.安装Axios#xff1a;2.axios对象封装3.请求api封装4.使用pinia临时库保存响应信息#xff08;按需求用#xff09;5.最后#xff0c;在组件中使用#xff01; 总结
封装axios对象#xff0c;编写公共请求代码、添加拦截逻辑、然后分层实现axios请求… 目录 总结一、步骤1.安装Axios2.axios对象封装3.请求api封装4.使用pinia临时库保存响应信息按需求用5.最后在组件中使用 总结
封装axios对象编写公共请求代码、添加拦截逻辑、然后分层实现axios请求的调用
一、步骤
1.安装Axios
首先确保你的项目中已经安装了Axios。如果没有安装可以通过以下命令安装Axios
npm install axios2.axios对象封装
创建一个名为request.js的文件用于封装Axios对象。
import axios from axios
import { Message } from element-ui
import {tokenStore} from /store/store;// 创建一个 Axios 实例
const axiosInstance axios.create({baseURL: http://localhost:8080/qy, // 通用后端 Url 地址timeout: 5000, // 请求最大等待时间,headers: { Content-Type: application/json },
})// 添加请求拦截器
axiosInstance.interceptors.request.use((config) {// 获取请求的URLconst requestUrl config.url;console.log(requestUrl);// console.log(config);// 提取URL路径部分/qy/Login// const urlPath new URL(requestUrl).pathname;// 如果是post请求将参数data转成json字符串// 检查请求方法是否为 POSTif (config.method post || config.method POST) {// 将请求数据转换为 JSON 字符串config.data JSON.stringify(config.data);// 设置请求头的 Content-Type// config.headers[Content-Type] application/json;}// 在请求头中添加令牌信息const jwtToken tokenStore().jwtToken // 从pinia中获取令牌// 检查是否是登录请求这里假设登录请求的URL是 /Loginif (requestUrl ! /Login requestUrl ! /LogOut) {console.log(requestUrl);// 如果不是登录请求添加令牌到请求头if (jwtToken) {config.headers.Authorization ${jwtToken}}}return config},(error) {return Promise.reject(error)}
)//添加响应拦截器
axiosInstance.interceptors.response.use((response) {var res response.data// console.log(res);// 设置请求状态弹窗提示if (res.status 200) {//请求成功提示Message.success(res.msg);} else {Message.error(res.msg);}// 后端响应Resbody的data数据return res
},(error) {return Promise.reject(error)}
)export default axiosInstance3.请求api封装
创建一个api.js文件默认导入封装好的axios对象
import axiosInstance from /request/requestexport function login(data) {return axiosInstance({url : /Login,method : POST,data})
}export function logOut() {return axiosInstance({url : /LogOut,method : get,})
}4.使用pinia临时库保存响应信息按需求用
// 导入pinia库
import { defineStore } from pinia;
// 导入api
import { login } from /request/api/system;
import { logOut } from /request/api/system;
// 导入jwt解析器
import jwtDecode from jwt-decode;
// 导入默认导出的路由对象用于跳转路由
import router from /router/router;export const tokenStore defineStore({id: myStore,state: () ({jwtToken: null,user_name: null,user_name_id: null,user_type: null,}),actions: {doLogin(params) {login(params).then((res) {if (res.status 200) {const jwtToken res.data; // 从响应中获取JWT// console.log(jwtToken);this.jwtToken jwtToken; // pinia存储JWTlocalStorage.setItem(jwtToken, jwtToken);console.log(this.user_name);// 解码JWT令牌以获取载荷信息const decodedToken jwtDecode(jwtToken);console.log(decodedToken);//访问包含在JWT令牌中的用户信息//保存用户类型的id便于门诊医生问诊var user_name_id decodedToken.user_name_id;//保存用户类型至本地便于控制导航栏的显示与隐藏const userType decodedToken.user_type;this.user_name_id user_name_id;console.log(this.user_name_id);this.user_type userType 1? 系统管理员: userType 2? 挂号员: 门诊医生;//跳转到主页router.push(/index);}});},LogOut() {return logOut();}},
});
5.最后在组件中使用
点击事件如下
submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {//将登陆用户名赋给store管理实现共享this.tokenStore.user_name this.userForm.userName;//调用axios对象的get发送请求this.tokenStore.doLogin(this.userForm)} else {console.log(error submit!!);return false;}});},LogOut() {// 删除所有本地缓存包括令牌信息// localStorage.clear();this.tokenStore.LogOut().then((res) {if (res.status 200) {// 删除所有本地缓存包括令牌信息localStorage.clear();// 跳转到登录页面this.$router.push({ path: /Login });}});// localStorage.removeItem(user_name);// localStorage.removeItem(user_type);},
