vue+axios全局添加请求头和参数操作

原创

于 2021-02-18 14:47:02 发布 · 8k 阅读

CC 4.0 BY-SA版权

本文探讨了在Vue应用中，如何通过axios将登录获取的token分别放置于请求头或参数中发送给后台，以及设置axios允许携带cookie的方法。还介绍了如何在VueCookie和localStorage中管理token，以及POST请求头和数据格式的相关知识。

走登录的接口都会返回一个token值，然后存起来方便之后调接口的时候给后台传过去，传给后台的方式有两种：（具体使用哪种需要和后台商量）

1、放在请求头中

2、放在接口的参数中

1、放在请求头中

下面代码是从本地cookie中拿token

VueCookie：一个用于处理浏览器cookies的简单Vue.js插件.

// 在封装axios的文件中添加拦截器// 添加请求拦截器，在请求头中加token
service.interceptors.request.use(config => { // 判断本地的cookie中是否有token 
    if (VueCookie.isKey('token')) {
        config.headers.Authorization = VueCookie.get('token')
    } else { // 跳转到登录页面(这里使用router，是因为路由文件引入到了此文件里) 
        router.push('/login')
    }
    return config
}, error => {
    return Promise.reject(error)
})

这个时候虽然在请求头中放了token，但是后台并拿不到token的值，我们需要在创建axios对象的时候允许请求携带cokie，也可以加到main.js全局里面。

// 放在请求文件中
const service = axios.create({
    baseURL: "http://XXXXXXXXX:XXXX",
    timeout: 10000,
    withCredentials: true // 允

最低0.47元/天解锁文章

vue+axios全局添加请求头和参数操作

3 条评论