ToB企服应用市场:ToB评测及商务社交产业平台

标题: Axios设置token到哀求头的三种方式 [打印本页]
作者: 怀念夏天    时间: 2024-6-22 12:59
标题: Axios设置token到哀求头的三种方式
1、为什么要携带token?

用户登录时，后端会返回一个token，而且生存到欣赏器的localstorage中，可以根据localstorage中的token判定用户是否登录，登录后才有权限访问相干的页面，以是当发送哀求时，都要携带token给后端进行判定。
2、Axios设置token哀求头的三种方式

第一种：配置前置拦截器（因为每次发送axios哀求都要携带token信息，以是可以在main.js中进行全局配置）

就是在发送axios哀求之前将哀求拦截，添加头部信息后再发送哀求
  1. import axios from 'axios'
  2. //配置axios的全局基本路径
  3. axios.defaults.baseURL = 'http://localhost:8080';
  4. //全局属性配置，在任意组件内可以使用this.$http获取axios对象
  5. Vue.prototype.$http = axios
  9. // 配置axios前置拦截器，作用是让所有axios请求携带token，后台需要token校验是否登录
  10. axios.interceptors.request.use(config => {
  11.   // 1.从缓存中获取到token,这里的Authorization时登录时你给用户设置token的键值
  12.   let authorization = localStorage.getItem("Authorization");
  13.   // 2.如果token不为null，那么设置到请求头中，此处哪怕为null，我们也不进行处理，因为后台会进行拦截
  14.   if (authorization) {
  15.   //后台给登录用户设置的token的键时什么，headers['''']里的键也应该保持一致
  16.     config.headers['Authorization'] = authorization;
  17.   }
  18.   // 3.放行
  19.   return config;
  20. }, error => {
  21. //失败后抛出错误
  22.   Promise.reject(error);
  23. })
复制代码

第二种：设置defaults.headers.common来设置全局的哀求头

  1. axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
复制代码
第三种：直接在哀求中加

  1. //get请求
  2. axios.get('/api/data', {   
  3.     headers: {   
  4.         'Authorization': `Bearer ${token}`   
  5.     }   
  6. });
  7. //post请求
  8. axios.post('/api/data', {}, {  
  9.     headers: {  
  10.         'Authorization': `Bearer ${token}`  
  11.     }  
  12. });
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4