I need the token(s) to be fetched from the header instead of data of the request.

[AhmedAtef07]

After digging into the lib, I can see that you fetch the token data from a property name from the axios response data, in my case, I want to fetch multiple tokens from the header not the data. I use devise token auth, and I need to store and send const deviseTokens = ['token-type', 'access-token', 'client', 'uid', 'expiry'], instead of just 1 token and in the Authorization header.

I tried to work it around by using a plugin on my own, which adds an axios interceptor to fetch the headers on every response and set it into every request, everything worked fine except for the login (on app init), in the init section you call fetchUser(), and my interceptors won't be there yet, so it will cause a 401.

I either want: 1. an option to enable/disable the fetchUser() on init, so I can call it myself in the app mounted for example. Or 2. ability to add my interceptors there. Or 3. ability to choose from where to fetch the tokens, and please support the option of having the tokens in multiple properties in the header, not just 1 header field. Or. 4. add support for devise authentication as it is so popular indeed and I see you started to implement login strategies, so it can be one of the strategies.

Thank you so much.

_{This feature request is available on Nuxt.js community (#c58)}

[NickBolles]

I second the option to disable fetchUser on init, or at least override it with my own implementation. (i need to do more complex stuff to get the user, don't ask :) )

If we have a way to overwrite fetchUser, and have access to a flag saying "isFirst" or "isInit" or something, ti seems like it would add a ton of flexibility

[Samuelfaure]

I would also like this feature. Since the explosion of popularity in nuxt.js, the rails/nuxt stack is exploding as well, and devise_auth_token is the most popular token solution on rails.

This developer did his own fork to adapt the auth module to devise : https://github.com/WilliamDASILVA/auth-module

[KevinBerthier]

Here is my workaround in plugins/axios.js

export default function ({ $axios }) {
  $axios.onRequest(config => {
    config.headers.client = window.localStorage.getItem('client');
    config.headers['access-token'] = window.localStorage.getItem('access-token');
    config.headers.uid = window.localStorage.getItem('uid');
    config.headers['token-type'] = window.localStorage.getItem('token-type');
  })

  $axios.onResponse(response => {
    if (response.headers.client) {
      localStorage.setItem('access-token', response.headers['access-token']);
      localStorage.setItem('client', response.headers.client);
      localStorage.setItem('uid', response.headers.uid);
      localStorage.setItem('token-type', response.headers['token-type']);
    }
  })

Inspired by lynndylanhurley/devise_token_auth#844 (comment)

[remy727]

Just a note - please don't forget to expose the headers on the server.

For example, in Rails

Rails.application.config.middleware.insert_before(0, Rack::Cors) do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
+     expose:  ["uid", "client", "expiry", "access-token", "token-type"]
  end
end

[udit99]

FYI @KevinBerthier 's solution worked for me with a small tweak: You need to register axios with nuxt as a plugin:

//nuxt.config.js
....
....
plugins: [
'~/plugins/axios',
...
]
as described here

[udit99]

I take that back, @KevinBerthier your solution was successful in setting the right values in localStorage but for some reason, the auth-module doesnt recognize the user as having logged in. After loggin in using the above mechanism to set localStorage fields from the headers instead of the body, $nuxt.$auth.loggedIn still stays false and the auth module never makes the user autoFetch call.

When I forcibly render a token in the json body on the server side, I do get the correct behavior. So I feel like there's still a missing piece in this workaround. Any ideas?

[devzom]

@udit99
@KevinBerthier

I'm already also using headers.token instead of response. But this happened by Laravel backend with Set-Cookie option.

You can try workaround with setting $auth userToken by this in axios plugin

await app.$auth.setUserToken(newToken) 

This will try to update $auth token globally and will refetch user data from auth/user endpoint.

Better to use also $auth instance to set/modify $auth related stores, by this
https://auth.nuxtjs.org/api/storage/#local-storage
Just Incject app as You did with $axios in function attributes.

[andreas-it-dev]

I'm already also using headers.token instead of response.

@devzom can you elaborate on how you configured that in the nuxt.config.js?