CODEWITHSUNDEEP
typescriptaxios
Trevor
Trevor

Reputation: 8004

Type '{ 'x-access-token': any; } | { 'x-access-token'?: undefined; }' is not assignable to type 'AxiosRequestHeaders

I am trying to assign headers to axios.get, below throws error.

import authHeader from './auth-header';

return axios.get(API_URL + 'user', { headers: authHeader() });

The function is as:

export default function authHeader() {
    const userStr = localStorage.getItem("user");
    let user = null;
    if (userStr)
      user = JSON.parse(userStr);
  
    if (user && user.accessToken) {      
      return { 'x-access-token': user.accessToken };
    } else {
      return {};
    }
  }

However, if I do something like the below it works:

 return axios.get(API_URL + 'user', { headers: { 'Authorization': `token test` }});

What am I missing here?

Upvotes: 1

Views: 1264

Answers (2)

andrej28
andrej28

Reputation: 19

I had simmilar problem and solution was add return type to authHeader function Record<string, string> So it would look like this

export default function authHeader(): Record<string, string> {
  const userStr = localStorage.getItem("user");
  let user = null;
  if (userStr) { user = JSON.parse(userStr); }

  if (user && user.accessToken) {
    // return { Authorization: 'Bearer ' + user.accessToken }; // for Spring Boot back-end
    return { "x-access-token": user.accessToken };       // for Node.js Express back-end
  } else {
    return {};
  }
}

Upvotes: 0

Phil
Phil

Reputation: 164924

The definition for Axios headers is...

type AxiosRequestHeaders = Record<string, string | number | boolean>;

TypeScript is not able to infer the correct return type from your code.

Simply set the appropriate return type on your function

export default function authHeader(): AxiosRequestHeaders {
  //...
}

An even better option would be to correctly type your "user" data

interface User {
  accessToken?: string
}

export default function authHeader(): AxiosRequestHeaders {
  const user = JSON.parse(String(localStorage.getItem("user"))) as User | null
  return user?.accessToken ? { "x-access-token": user.accessToken } : {}
}

Upvotes: 3

Related Questions