輸入'{'x-access-token'：任意；}|{'x-access-token'？：未定義；}'不可分配給型別'AxiosR

我有一個 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;

uj5u.com熱心網友回復：

這是您的兩個函式的型別安全重構。我留下了一些評論來解釋：

TS游樂場

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

uj5u.com熱心網友回復：

首先創建一個 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 實體發出發布請求

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;
}

標籤：反应 打字稿 还原

上一篇：在ConstraintLayout中在螢屏底部的視圖上方對齊一條水平線

下一篇：作為props傳遞時，graphqlrefetch的型別是什么？