How authorized vuejs authentication with nodejs and jsonwebtoken backend?

Question

I'm learning vuejs and nodejs to set up authentication for an upcoming student project.

For that I created an api that allows to create character cards that when clicked allow to see the history of the character.

It works well and so I attacked the authentication part where I managed to allow the creation of user and the connection of this last with jsonwebtoken and everything works on the backend side but when I am on the frontend side the access to the characters when the user is connected does not work and returns me an error that I wrote if nothing works. I want to specify that when I connect the token is well created because the backend returns it well with the user ID however when I arrive on the page of the characters and I look at the headers of the request I do not see "Authorization : Bearer token" . And I have no idea if on the frontend I'm supposed to do any other manipulation besides retrieving the list of characters.

I wondered if the problem didn't come from a npm "cors" package I had downloaded and rewrote the permissions for the request headers but nothing works.

I want to specify that I use axios to get my list of characters.

I can get the token on the login request but I don't know what to do with it to allow the user to access the characters

Here the unauthorized error when the login works and redirect to the character lists :

Here the authentication middleware from the backend :

Here my routes with auth middleware :

Sorry If I'm missing some things on how to write a good question here I'm not used to stackoverflow so If I have to give more specifics information tell me on comment

Thanks for reading

Utku Demir · Accepted Answer · 2022-08-25 22:12:25Z

1

You should set the authorization header for each requests requires authentication.

If you use custom axios instance for your requests, you can specify the authorization header using interceptors such as:

axiosInstance.interceptors.request.use(config => {
  const token = /* your token */;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

Or, if you don't use such an instance, you can set it as:

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

answered Aug 25, 2022 at 22:12

Utku Demir

747 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yokke Over a year ago

Thanks for your help with that hind I find a way to use localstorage to get my token and make the authentication works ! Cheers !

Collectives™ on Stack Overflow

How authorized vuejs authentication with nodejs and jsonwebtoken backend?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related