axios拦截器获取并存储token

vue-resource 拦截器使用

在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。
vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，如果设置了拦截器如下，会优先执行拦截器函数，获取响应体，然后才会决定是否把response返回给then进行接收。那么我们可以在这个拦截器里边添加对响应状态码的判断，来决定是跳转到登录页面还是留在当前页面继续获取数据。

下面的是登录页面。需要登陆才能获取token值，这是加载登录页面的，也可以不加在登陆页面，先请求以下代码后将token加入在本地数据里，后面的请求就直接带上token

       http.post('/api/login/password',{password: "xxxxx",phone:"xxxxx"}).then((data)=>{
         console.log(data);
        localStorage.setItem("token",data.data.token);
       })

注意：http是我创建的axios实例对象

这是我自己创建的axios实例http是自己去的名字，你可以自己选取，不要用axios，因为会报错

const http = axios.create({
  baseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  timeout: 5000,
});

然后在请求拦截器的进行对headers的加入

// 请求拦截
// 添加请求拦截器
http.interceptors.request.use(
    function (request) {
    // 在发送请求之前做些什么
    //若token存在，则在每次请求头中加入token
  const headers=request.headers;
  let token=localStorage.getItem("token");
  headers["X-YAuth-Token"]=token;

    return request;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

封装后的代码
utils/request.js

import axios from "axios";
import { Toast } from "vant";
// 创建一个单例（实例）
const http = axios.create({
  baseURL: "xxxxxxxxxxxxxxxxxxxxxx",
  timeout: 5000,
});

// 请求拦截
// 添加请求拦截器
http.interceptors.request.use(
    function (request) {
    // 在发送请求之前做些什么
    //若token存在，则在每次请求头中加入token
  const headers=request.headers;
  let token=localStorage.getItem("token");
  headers["X-YAuth-Token"]=token;

    return request;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截
http.interceptors.response.use(
  (res) => {
    // this.$toast.clear();
    return res.data;
  },
  (err) => {
    return Promise.reject(err);
  }
);

export default http;

在其他页面使用时导入即可

import http from "../utils/requets"

然后使用

    http.get('这的你拼上去的路径',).then((data)=>{
        console.log(data);
      });
    },