Axios Authorization not working - VueJS + Django

Question

I am trying to build an application using VueJS and Django. I am also using Graphene-Django library, as the project utilize GraphQL.

Now, The authentication works fine and i get a JWT Token back. But when i use the token for other queries that need authentication, i got this error in Vue:

"Error decoding signature"

and the Django Log also returns this:

graphql.error.located_error.GraphQLLocatedError: Error decoding signature

jwt.exceptions.DecodeError: Not enough segments

ValueError: not enough values to unpack (expected 2, got 1)

the bizarre thing is that the same query when executed in Postman just works fine.

As i mentioned in the title is use Axios for my requests, here's an example of a request:

axios({
  method: "POST",
  headers: { Authorization: "JWT " + localStorage.getItem("token") },
  data: {
    query: `{
        dailyAppoint (today: "${today}") {
            id
            dateTime
        }
     }`
    }
});

Note: It uses 'JWT' not 'Bearer' because somehow 'Bearer' didn't work for me.

Answer 1

Use a request interceptor to set the Authorization header:

axios.interceptors.request.use(config => {
   if (localStorage.getItem("token") != null)
     config.headers["Authorization"] = "JWT " + localStorage.getItem("token");
   return config;
 });