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企服之家，中国第一个企服评测及商务社交产业平台。