输入 '{ 'x-access-token': any; } | {'x-access-token'？：未定义； }' 不可分配给类型 'AxiosRequestHeaders |不明确的'答案

【问题标题】：Type '{ 'x-access-token': any; } | { 'x-access-token'?: undefined; }' is not assignable to type 'AxiosRequestHeaders | undefined'输入 '{ 'x-access-token': any; } | {'x-access-token'？：未定义； }' 不可分配给类型 'AxiosRequestHeaders |不明确的'
【发布时间】：2022-01-19 10:52:36
【问题描述】：

我有一个autHeader，我想将它添加到“服务”，但是出现了这个错误：

Type '{ 'x-access-token': any; } | { 'x-access-token'?: undefined; }' is not assignable to 
type 'AxiosRequestHeaders | undefined'.
Type '{ 'x-access-token'?: undefined; }' is not assignable to type 'AxiosRequestHeaders'.
Property ''x-access-token'' is incompatible with index signature.
Type 'undefined' is not assignable to type 'string'.

我该如何解决这个问题？

向其中添加“authheader”的最佳位置是什么？

todo.service.ts：

import authHeader from './auth-header';

// create columns
async function createList(title: string) {
  const response = await axios.post(
    'http://ec2-18-132-52-86.eu-west-2.compute.amazonaws.com/api/v1/todo-list',
    { title: title },
    { headers: authHeader() }
  );
  return response;
}

auth-header.ts：

const authHeader = () => {
  const userInfo = localStorage.getItem('userInfo');
  let user = null;
  if (userInfo) {
    // convert strng to Object
    user = JSON.parse(userInfo);
  }

  if (user && user.accessToken) {
    // return { Authorization: 'Bearer' + user.accessToken }
    return { 'x-access-token': user.accessToken };
  } else {
    return {};
  }
};

export default authHeader;

【问题讨论】：

标签： reactjs typescript redux

【解决方案1】：

首先创建一个 Axios 对象实例。

在 todo.service.ts

let instance = axios.create()

创建实例后，设置发布请求的标头

在 todo.service.ts

const userInfo = localStorage.getItem('userInfo');
  let user = null;
  if (userInfo) {
    // convert strng to Object
    user = JSON.parse(userInfo);
  }
//This will set the default authorization field for all post requests header
instance.defaults.headers.post['Authorization'] = 'Bearer' + user.accessToken

现在在你的函数内部使用 Axios 实例发出一个 post 请求

async function createList(title: string) {
  const response = await instance.post(
    'http://ec2-18-132-52-86.eu-west-2.compute.amazonaws.com/api/v1/todo-list',
    { title: title }
  );
  return response;
}

【讨论】：

【解决方案2】：

这是您的两个函数的类型安全重构。我留下了一些cmets来解释：

TS Playground

import {
  default as axios,
  AxiosRequestConfig,
  AxiosRequestHeaders,
} from 'axios';

type UserInfo = {
  accessToken: string;
};

export function getAuthHeaders (): AxiosRequestHeaders {
  // Set this to whatever the minimum token length should be (if you know)
  // Otherwise, you can leave at 1 for "not an empty string"
  const minTokenLength = 1;

  try {
    const userInfo = localStorage.getItem('userInfo');
    // Abort if not string
    if (typeof userInfo !== 'string') throw new Error('User info not found');

    // Destructure token
    const {accessToken} = JSON.parse(userInfo) as UserInfo;

    // Abort if token is not string and min length
    if (!(typeof accessToken === 'string' && accessToken.length >= minTokenLength)) {
      throw new Error('Invalid user access token');
    }

    // I left this here because it seems like you weren't sure about which format you need:
    // return {Authorization: `Bearer ${accessToken}`};

    // Return headers object
    return {'x-access-token': accessToken};
  }
  catch {
    // Catch any errors and return an empty headers object
    return {};
  }
}

async function createList (title: string) {
  const data = {title};
  const url = 'http://ec2-18-132-52-86.eu-west-2.compute.amazonaws.com/api/v1/todo-list';
  const requestConfig: AxiosRequestConfig = {headers: getAuthHeaders()};
  return axios.post(url, data, requestConfig);
}

const axiosResopnse = await createList('myList');

【讨论】：