Vue项目将token添加到请求头中

1.调用后端登录接口获取token(我这里是将登陆接口封装在vuex中)

//登录接口封装 token存储
        Login(context, payload) {
            // console.log(common.request)
            return new Promise((resolve,reject)=>{
                common.request({
                    method:'post',
                    url:'user/login',
                    data:{
                      account:payload.name,
                      password:payload.password
                    },
                    loading:true,
                }).then(res=>{
                    setToken(res.data.data.token);  //存储token
                    resolve(res.data.data);
                }).catch(err => {
                    reject(err);
                })
            })
           
        },

2.创建request.js文件，封装axios

import axios from 'axios';
import { getToken } from '@/utils/token'

const service = axios.create({
    baseURL:'/api',
    timeout:5000
})


//请求拦截器
service.interceptors.request.use(function(config) {
    //在发送请求前
    if(getToken()){
        config.headers['token'] = getToken();
    }
    return config;
}, function(error) {
    //请求错误
    return Promise.reject(error)
});

//响应拦截器
service.interceptors.response.use(function(response) {
    return response;
}, function(error) {
    //响应数据错误
    return Promise.reject(error)
});

export default service; //直接返回service;

3.在main.js中引入request.js，将其绑定到Vue原型链上