vue3前端开发-小兔鲜项目-路由拦截器增加token的携带

vue3前端开发-小兔鲜项目-路由拦截器增加token的携带!实际开发中,很多业务接口的请求,都要求必须是登录状态!为此,这个token信息就会频繁的被加入到了请求头部信息中。request请求头内既然需要频繁的携带这个token.我们就可以把它配置一下。添加到路由拦截器内。


1:修改一下,路由拦截器的代码内容。

复制代码
//axios基础的封装
import axios from "axios";
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'
import { useUserStore } from '@/stores/user';


const httpInstance = axios.create({
    baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout:5000
})
//axios请求拦截器
httpInstance.interceptors.request.use(
    config =>{
        // 1. 从pinia获取token数据
        const userStore = useUserStore()
        // 2. 按照后端的要求拼接token数据
        const token = userStore.userInfo.token
        if (token) {
            config.headers.Authorization = `Bearer ${token}`
    }
        return config
    },e => Promise.reject(e)
)
//axios响应拦截器
httpInstance.interceptors.response.use(
    res => res.data,
    e =>{
        ElMessage({
            type:'warning',
            message:e.response.data.message
        })
        return Promise.reject(e)
    }
)
export default httpInstance

2:主要是做了一个简短的配置。

如图,从pinia中获取这个token。然后安装后端工程师的要求去拼接token。

题外话:每个公司,都有自己公司特殊定义的要求格式。所以,到时候询问后端开发人员,就知道,该如何拼接token字符串了。


3:测试一下效果如何。

如图,所示,无论是哪个接口调用,都自动拼接带着这个拼接完成后的token信息了。

相关推荐
icebreaker11 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁16 分钟前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊28 分钟前
state和ref
前端·javascript·react.js
GEO_YScsn30 分钟前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing30 分钟前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_33 分钟前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠35 分钟前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner200035 分钟前
Webpack开发:从入门到精通
前端·webpack·node.js
GISer_Jing37 分钟前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin1 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试