Axios - extracting http cookies and setting them as authorization headers

问题

I am building authentication for my application and I am using access and refresh tokens.

Upon user login, the API issues 3 things

refresh token
access token string with headers and payload
access token string with signature

These tokens are all jwt tokens.

This article discusses why access tokens should be split.

using express, I send the tokens back to the browser in my controller like so:

res.cookie(
      ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD,
      headerAndPayload,
      COOKIE_OPTIONS,
    )
    res.cookie(
      ACCESS_TOKEN_COOKIE_SIGNATURE,
      signature,
      COOKIE_OPTIONS_HTTP_ONLY,
    )
    res.cookie(REFRESH_TOKEN_COOKIE, refreshToken, COOKIE_OPTIONS)

    return res.json({ username, uid })

auth.constants.ts

export const COOKIE_OPTIONS: CookieOptions = {
  secure: true,
  sameSite: 'lax',
}

export const COOKIE_OPTIONS_HTTP_ONLY: CookieOptions = {
  httpOnly: true,
  secure: true,
  sameSite: 'lax',
}

export const ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD = 'access_token_header_payload'
export const ACCESS_TOKEN_COOKIE_SIGNATURE = 'access_token_signature'
export const REFRESH_TOKEN_COOKIE = 'refresh_token'

In the ui (react) I go into Chrome devtools -> application -> storage -> cookeis and I can see that they are updated everytime I login. This is the behavior I want so that's good so far.

Now when I want to send a request to my API to create something (let's say I am creating a new blog post), I want to grab those cookies and pass them as an Authorization Header.

I am following this person's suggestion except I noticed he is using store which I am guessing is some form of state. Since I am not doing that and multiple sources (source 1, source 2) point to the fact that the standard for sending tokens to the API for authentication is using Authorization header, I would like to follow that.

Currently, when I make an API request using axios, I console log the express request object and can see my tokens in cookies like so:

headers: {
    host: 'localhost:3001',
    connection: 'keep-alive',
    'content-length': '0',
    accept: 'application/json, text/plain, */*',
    'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36',
    origin: 'http://localhost:3000',
    'sec-fetch-site': 'same-site',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    referer: 'http://localhost:3000/',
    'accept-encoding': 'gzip, deflate, br',
    'accept-language': 'en-US,en;q=0.9',
    cookie: 'access_token_header_payload=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTY4MzQwODB9; access_token_signature=3pUbxjWgly9xmYSJObOvTgps9qwjOIrHWWE4LPYidmQ; refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTc0Mzg4MjB9.IKdRsaTTgAeUfwicLcBpRvw89WgYXy_rCRN5o2BJFqY'
  },

but I want to send these cookies as Authorization: Bearer <tokens> instead. How would I do that in axios? Or is what I am doing secure?

this is my axios interceptor

import axios from 'axios'

const service = axios.create({
  withCredentials: true,
  baseURL: process.env.REACT_APP_API_BASE_URL,
  timeout: 5000,
})

// Request interceptors
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  },
)

// Response interceptors
service.interceptors.response.use(
  response => {
    console.log('response', response)

    return response.data
  },
  error => {
    return Promise.reject({ ...error })
  },
)

export default service

来源：https://stackoverflow.com/questions/63309952/axios-extracting-http-cookies-and-setting-them-as-authorization-headers

标签

reactjs

axios

jwt

http-headers