Axios设置token请求头的三种方式

 更新时间:2024年02月05日 08:59:55   作者:fortune_often_in  
用户登录时,后端会返回一个token,并且保存到浏览器的localstorage中,可以根据localstorage中的token判断用户是否登录,所以当发送请求时,都要携带token给后端进行判断,本文给大家介绍了Axios设置token请求头的三种方式,需要的朋友可以参考下

1、为什么要携带token?

用户登录时,后端会返回一个token,并且保存到浏览器的localstorage中,可以根据localstorage中的token判断用户是否登录,登录后才有权限访问相关的页面,所以当发送请求时,都要携带token给后端进行判断。

2、Axios设置token请求头的三种方式

第一种:配置前置拦截器(因为每次发送axios请求都要携带token信息,所以可以在main.js中进行全局配置)

就是在发送axios请求之前将请求拦截,添加头部信息后再发送请求

import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL = 'http://localhost:8080';
//全局属性配置,在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios



// 配置axios前置拦截器,作用是让所有axios请求携带token,后台需要token校验是否登录
axios.interceptors.request.use(config => {
  // 1.从缓存中获取到token,这里的Authorization时登录时你给用户设置token的键值
  let authorization = localStorage.getItem("Authorization");
  // 2.如果token不为null,那么设置到请求头中,此处哪怕为null,我们也不进行处理,因为后台会进行拦截
  if (authorization) {
  //后台给登录用户设置的token的键时什么,headers['''']里的键也应该保持一致
    config.headers['Authorization'] = authorization;
  }
  // 3.放行
  return config;
}, error => {
//失败后抛出错误
  Promise.reject(error);
})

第二种:设置defaults.headers.common来设置全局的请求头

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

第三种:直接在请求中加

//get请求
axios.get('/api/data', {   
    headers: {   
        'Authorization': `Bearer ${token}`   
    }   
});
//post请求
axios.post('/api/data', {}, {  
    headers: {  
        'Authorization': `Bearer ${token}`  
    }  
});

到此这篇关于Axios设置token请求头的三种方式的文章就介绍到这了,更多相关Axios设置token请求头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用javaScript实现点击输入框弹出窗体选择信息

    利用javaScript实现点击输入框弹出窗体选择信息

    这篇文章主要是对利用javaScript实现点击输入框弹出窗体选择信息进的实例行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js使用highlight.js高亮你的代码

    js使用highlight.js高亮你的代码

    本篇文章主要介绍了js使用highlight.js高亮你的代码 ,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • 原生js图片轮播效果实现代码

    原生js图片轮播效果实现代码

    这篇文章主要为大家详细介绍了基于原生js实现图片轮播效果的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • json属性名为什么要双引号(个人猜测)

    json属性名为什么要双引号(个人猜测)

    json属性名为什么要双引号?更加规范,利于解析、避免class等关键字引起的不兼容问题,需要的朋友可以参考下
    2014-07-07
  • JavaScript查看数据返回值的方法

    JavaScript查看数据返回值的方法

    console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法,它们的主要区别在于目的、使用场景以及展示方式,本文将给大家介绍JavaScript 中怎么看数据返回值,需要的朋友可以参考下
    2024-07-07
  • js老生常谈之this,constructor ,prototype全面解析

    js老生常谈之this,constructor ,prototype全面解析

    下面小编就为大家带来一篇js老生常谈之this,constructor ,prototype。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-04-04
  • 解决LayUI表单获取不到data的问题

    解决LayUI表单获取不到data的问题

    今天小编就为大家分享一篇解决LayUI表单获取不到data的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • uni-app 滚动到指定位置的操作方法

    uni-app 滚动到指定位置的操作方法

    这篇文章主要介绍了uni-app 滚动到指定位置的操作方法,其中方法一是使用标签,可以将页面横向(或纵向)滚动到指定位置还有其他多种方法,需要的朋友可以参考下
    2024-05-05
  • 微信小程序canvas实现签名功能

    微信小程序canvas实现签名功能

    这篇文章主要为大家详细介绍了微信小程序canvas实现签名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 处理JavaScript浮点数精度问题的解决方案

    处理JavaScript浮点数精度问题的解决方案

    在开发过程中,特别是涉及到金额计算或需要精确比较的场景,浮点数精度问题是一个常见而重要的挑战,本文将介绍在JavaScript中如何识别、理解和解决这些问题,并提供一些实用的技巧和建议,需要的朋友可以参考下
    2024-06-06

最新评论