Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

AhmedAtef07 started this conversation in Ideas & Feature Requests
Discussion options

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)
You must be logged in to vote

Replies: 7 comments 1 reply

Comment options

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

You must be logged in to vote
0 replies
Comment options

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

You must be logged in to vote
0 replies
Comment options

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)

You must be logged in to vote
1 reply
Comment options

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
Comment options

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

You must be logged in to vote
0 replies
Comment options

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?

You must be logged in to vote
0 replies
Comment options

@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.

You must be logged in to vote
0 replies
Comment options

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

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

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Converted from issue

This discussion was converted from issue #76 on January 21, 2022 10:04.

AltStyle によって変換されたページ (->オリジナル) /