vue请求头携带token

vue请求拦截,在请求头中携带token

正常登陆的用户就会有后端响应的token值,在用户每次发起请求都要在请求头中携带这个token值.

main.js

/*引入axios*/
import Axios from "axios";

Vue.prototype.axios = Axios;

// 添加请求拦截器,在请求头中加token
Axios.interceptors.request.use(
  config => {
    if (localStorage.getItem("token")) {
      config.headers.Authorization = "JWT " + localStorage.getItem("token");
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
  • 3
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue2中发送请求携带token可以通过以下方式实现: 1. 使用axios库发送请求 首先需要在项目中安装axios库,然后在需要发送请求的组件中引入axios库: ``` import axios from 'axios'; ``` 然后可以通过axios的拦截器实现在请求中添加token: ``` // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前添加token const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = 'Bearer ' + token; } return config; }, function (error) { return Promise.reject(error); }); ``` 在发送请求时,axios会自动将token添加到请求中: ``` axios.get('/api/user').then(response => { console.log(response.data); }).catch(error => { console.log(error); }); ``` 2. 使用Vue-resource库发送请求 首先需要在项目中安装Vue-resource库,然后在需要发送请求的组件中引入Vue-resource库: ``` import VueResource from 'vue-resource'; Vue.use(VueResource); ``` 然后可以在Vue-resource的拦截器中实现添加token: ``` // 添加请求拦截器 Vue.http.interceptors.push((request, next) => { // 在发送请求之前添加token const token = localStorage.getItem('token'); if (token) { request.headers.set('Authorization', 'Bearer ' + token); } next(); }); ``` 在发送请求时,Vue-resource会自动将token添加到请求中: ``` this.$http.get('/api/user').then(response => { console.log(response.body); }).catch(error => { console.log(error); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值