reactjs - 输入 '{ ' x-access-token' : any; } | { 'x-access-token' ?:未定义； }' is not assignable to type ' AxiosRequestHeaders |不明确的'

Question

我有一个 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”的最佳位置是什么？

tod​​o.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;

Answer 1

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

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');