在 axios 标头中设置从 api 接收的令牌答案

【问题标题】：set token recived from api in axios header在 axios 标头中设置从 api 接收的令牌
【发布时间】：2022-01-14 16:22:28
【问题描述】：

我向 API 发送一个创建帐户的请求（我使用 axios），然后 API 向我发送一个涉及令牌的响应。我将此令牌保存在本地存储中。但我不知道如何将其发送到 axios 标头中。

if (this.sendRequest) {
    axios.post(url, data)
      .then((res) => {
        if (res.data.type === "success") {
         localStorage.setItem("token",res.data.data);
        }
      })
      .catch((err) => this.msg.push("error" + err.response.status));
  }

【问题讨论】：

也许你可以看看这个stackoverflow.com/questions/44245588/…？

标签： javascript axios vuejs3

【解决方案1】：

为此，请按照以下步骤操作：

1- 在您的项目中创建一个名为 Services 的文件夹。然后在该文件夹中创建另一个名为 Config 的目录。在该文件夹中创建一个名为 auth-axios.js 的 .js 文件，如下所示：

在此文件中，您使用以下代码。通过这样做，您通知应用程序每次要调用 API 时，都必须经过此端口，并且必须自动在 API 中设置基本 URL 和标头：

import axios from "axios";
import authService from "../modules/authService";
import Vue from "vue";

const headers = {
  "content-type": "application/json",
  Accept: "application/json",
  "Accept-Language": "fa",
  version: "1000"
};

const API_V1 = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL_V1,
  headers: headers
});

const API_DEV = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL_DEV,
  headers: headers
});

API_DEV.interceptors.request.use(
  config => {
    const token = authService.getAccessToken();
    if (token) {
      config.headers["Authorization"] = "Bearer " + token;
    }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

export { API_V1, API_V4, API_DEV };

现在对于应用程序中的服务，您必须在同一服务目录中创建一个单独的文件，并在该文件中使用 API_1 变量。

例如，创建 accountServices.js 并在此文件上通过这种方式调用 API：

import { API_V1 } from "../config/auth-axios";

class employerServices {

  createAccount(body) {
    return API_V1.post("test-API-URL", body);
  }
}

export default new employerServices();

【讨论】：