Отправка текущего зарегистрированного пользователя из бэкенда Django во фронтенд React с помощью axios

Я пытаюсь отправить текущее имя пользователя, вошедшего в систему, из бэкенда django во фронтенд React. Я создал конечную точку currentuser/, которая прекрасно работает в бэкенде, она возвращает ожидаемый результат, но когда я вызываю эту конечную точку api в React с помощью axios, там возвращается нулевое значение.

Вот код для бэкенда

#view.py
from django.contrib.auth import get_user_model
from rest_framework import serializers
from rest_framework.response import Response
from rest_framework.views import APIView

User = get_user_model()

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username')

class LoggedInUserView(APIView):
    def get(self, request):
        serializer = UserSerializer(request.user)
        return Response(serializer.data)

#urls.py
urlpatterns = [
    path('currentuser/', views.LoggedInUserView.as_view(), name='currentuser'),
]

Вот результат при вызове api напрямую

enter image description here

Вот код для фронтенда

class App extends React.Component {
 state = {
        users: [],
    }


    getUsers() {
        axios.defaults.headers.common['Content-Type'] = 'application/json';
        axios.get(`http://localhost:8000/currentuser/`)
            .then(res => {
                console.log("res :", res);
                const user = res.data;
                console.log("response from backend", user);
                this.setState({ users: user });
                console.log(this.state.users);
            })
            .catch(err => {
                console.log("error:", err);

            });

        console.log(this.state.users);
    }
    constructor(props) {
        super(props);
        this.getUsers();
    }
 render() {
        return (.....)
}
};
export default App;

Вот результат при вызове api из фронтенда

enter image description here

Любые предложения будут оценены по достоинству

Только сейчас изучаю эту тему. Вы вошли в систему на React front-end? Если вы просто хотите получить профиль авторизованного пользователя. Вот мое решение для справки.

  • Сначала я попробовал использовать простую JWT аутентификацию для настройки react и Django. (погуглите "JWT аутентификация Django и React", есть много обучающих материалов).

    .

  • Затем авторизуйтесь на сайте react, и из ответа Django вы сможете получить данные о залогиненном пользователе. response.data является токеном, что означает, что вы можете использовать "jwt_decode" для получения нужной вам информации, включая: имя пользователя, id, email. (может возникнуть проблема безопасности... см. Если вы можете декодировать JWT, насколько они безопасны? , просто для обучения должно подойти). Ваш код может выглядеть следующим образом:

axios.post("http://127.0.0.1:8000/token/", {
        username: username,
        password: password,
    })
     .then((response) => {
      let token = response.data.access;
      localStorage.setItem("token", token);
      let user_id = jwt_decode(response.data.access).user_id;
      ...
      localStorage.setItem("user_id", user_id);
        
    })
  • После того, как вы получили свой user_id в localstorage, вы можете использовать его для получения всех деталей, ваш код может выглядеть следующим образом:
let id = parseInt(localStorage.getItem("user_id"));
const userDetail = (id) => {
const token = localStorage.getItem("token");
axios
  .get(`http://127.0.0.1:8000/users/${id}`, {
    headers: { Authorization: token },
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

В response.data включена вся информация, которую вы разместили на вашем Django back-end API. Надеюсь, это помогло.

Вернуться на верх