CODEWITHSUNDEEP
vue.jsdjango-rest-frameworkaxios
Carlos
Carlos

Reputation: 472

{detail: "Authentication credentials were not provided."} on get request with simplejwt

I saw alot of similar questions but those questions are not working for me. I really have no idea why I can't access the api. I have test it with the token in postman and it returned correct data. Can you correct me please.

backend

# model
class Department(models.Model):
    name = models.CharField(max_length=100

# viewset
class DepartmentViewSet(viewsets.ModelViewSet):
    queryset = models.Department.objects.all()
    serializer_class = serializers.DepartmentSerializer
    permission_classes = (IsAdminUser,)

#setting.py
CORS_ALLOWED_ORIGINS = [
    "http://localhost:8080",
    "http://127.0.0.1:8080",
]
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ),
}

frontend

# axios-base.js
import axios from "axios";

const getAPI = axios.create({
    baseURL: 'http://127.0.0.1:8000',
    timeout: 1000,
})

export {getAPI}

#template.vue
<script>
import { getAPI } from "../../src/axios-base.js";
export default {
  name: "Department",
  data() {
    return {
      departments: [],
    };
  },
  mounted() {
    this.getAllDepartment();
  },
  methods: {
    getAllDepartment: function() {
      const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl9....."; <- access token
      getAPI.get("/attendance-rest-api/departments/",
          {
              email: "[email protected]", <- admin account
              password: "admin",
          },
          {
            headers: {
              Authorization: `Bearer ${token}`,
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.departments = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

my api json view

    {
        "url": "http://localhost:8000/attendance-rest-api/departments/1/",
        "id": 1,
        "name": "GIC"
    },
    {
        "url": "http://localhost:8000/attendance-rest-api/departments/2/",
        "id": 2,
        "name": "GEE"
    },

error i got in terminal django

Unauthorized: /attendance-rest-api/departments/
[20/Sep/2020 13:18:04] "GET /attendance-rest-api/departments/ HTTP/1.1" 401 58

error i got in browser

detail: "Authentication credentials were not provided."

Upvotes: 1

Views: 1291

Answers (1)

raina77ow
raina77ow

Reputation: 106385

You're misusing Axios API. In GET requests, only one parameter - config object - should be passed into the corresponding method, and params should be passed inside params property of that object. Like this:

getAPI.get("/attendance-rest-api/departments/",
  {
    params: {
      email: "[email protected]", <- admin account
      password: "admin",
    },
    headers: {
      Authorization: `Bearer ${token}`,
      "Content-Type": "application/json",
    },
  }
)

With the existing code, that second object (containing headers) is just ignored, causing the error you see.

As a sidenote, I'm really not sure why do you use GET here. Not only usually having passwords as params of GETs is a (very) bad idea; in this case, however, it's not even clear what's the purpose.

I suspect you just combined the code from some POST requests (for login scenario, perhaps?). But again, GETs and POSTs are really different beasts.

Upvotes: 1

Related Questions