axios登录，登出接口的简单封装步骤详解！

---

总结

封装axios对象，编写公共请求代码、添加拦截逻辑、然后分层实现axios请求的调用！

一、步骤

1.安装Axios：

• 首先，确保你的项目中已经安装了Axios。如果没有安装，可以通过以下命令安装Axios：

npm install axios

2.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是 '/Login'if (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 axiosInstance

3.请求api封装

• 创建一个api.js文件，默认导入封装好的axios对象

import axiosInstance from "@/request/request"export 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");},