How can I get cookies in axios outside of loader or action function

[Yu-Lxy]

I can get userToken in loader or action function

export const loader: LoaderFunction = async ({ request }) => {
  let session = await getSession(request);
  const user = session.get(authenticator.sessionKey)
  console.log('userToken----->>>', user.token)

  return json(user)
}

but how can I get cookies in axios outside of loader or action function?
like:

export class Request {
    ...
    constructor(config: AxiosRequestConfig) {
      // create axios instance
      this.axios = axios.create(Object.assign(this.baseConfig, config));
      
      // 请求拦截
      this.axios.interceptors.request.use(
        async (config: AxiosRequestConfig): Promise<any> => {
          // token for authentication
          // if (...) {
          //     config.headers!.Authorization = token;
          // }

          return config;
      }, async (err: any) => {
          return Promise.reject(err);
        }
      );
  }
 ...
}

[kiliman]

You can't. Cookies are included in the request to Remix. You'll need to pass the token to Axios when making the Axios request.

export const loader: LoaderFunction = async ({ request }) => {
  let session = await getSession(request);
  const user = session.get(authenticator.sessionKey)

  // pass request config with user token in header 
  axios.get('/some/api', { headers: { 'Authorization', `Bearer ${user.token}` } })

  return json(user)
}

[sergiodxa]

Or create a new axios function on every loader.

export const loader: LoaderFunction = async ({ request }) => {
  let session = await getSession(request);
  const user = session.get(authenticator.sessionKey)

  let axios = createAxios(user.token)
  axios.get('/some/api', { headers: { 'Authorization', `Bearer ${user.token}` } })

  return json(user)
}

And in createAxios do axios.create and setup the interceptor.

[devraj]

I came across your blog post on this as well. I was hoping not to do that to keep things clean. I left some findings on this discussion and until remix gives us a pre and post hook for loaders and actions we will have to do what you've described.

@Yu-Lxy I also realised by trial and error that if you register the interceptor in the loader then it gets registered multiple times. I wish there was a way that axios ignored previously registered interceptors, we could use the root loader to register the interceptor once.

[sergiodxa]

If you don't want to create an instance on every loader you could do it on your HTTP server and pass the instance using getLoadContext, then access it like:

export const loader: LoaderFunction = async ({ request, context }) => {
  let session = await getSession(request);
  const user = session.get(authenticator.sessionKey)

  let data = await context.axios.get('/some/api')

  return json({ user, data })
}

I there was a way that axios ignored previously registered interceptors, we could use the root loader to register the interceptor once.

If you set the interceptor only on the root loader, and then the user does a client-side navigation, the user loader will not be fetched so it will not run, which will cause your axios instance to don't have the interceptor setup.

[devraj]

If you set the interceptor only on the root loader, and then the user does a client-side navigation, the user loader will not be fetched so it will not run, which will cause your axios instance to don't have the interceptor setup.

If the user performed a server side navigation then the loader would fire and the interceptor would get registered multiple times? Or that's what I have found from my tests.

[sergiodxa]

If you create the axios instance on every loader and not once, then every loader with setup the interceptor for their instance, but once per instance.

But for example on a navigation (eg. user clicks a link) not all loaders will be called, Remix only calls the required loaders, so you can rely on the root loader to run all the time, you can’t even rely on the root loader to run first because they run in parallel.

And you can’t create the axios instance globally instead of per request because then if two users send a request the second request will overwrite the interceptor of the first, if the first is still happening (eg it waited for an api response before doing a second request, inside the same loader) then the next usage of axios from the first user request will have the second user authorization header.