Невозможно получить токен аутентификации и сохранить его в локальном хранилище

Я хочу при регистрации пользователя отправить post запрос на http://127.0.0.1:8000/auth/token/login для получения auth токена пользователя, сохранить его в локальном хранилище и затем войти в систему пользователя Мне нужен этот токен в локальном хранилище для отправки post-запроса и получения api ответа обратно в моем vue, потому что сейчас он жестко закодирован

<template>
    <div>
        <div v-if="question">{{ question }}</div>
        <div v-else>Loading...</div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'QuestionView',
    props: {
        slug: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            question: null
        };
    },
    methods: {
        async getQuestionData() {
            const endpoint = `http://localhost:8000/api/v1/questions/${this.slug}`;
            try {
                const response = await axios.get(endpoint, {
                    headers: {
                        'Authorization': 'token (here is my token) '
                    }s
                });
                this.question = response.data; // Assuming your API response is an object containing question information
            } catch(error) {
                console.log(error.response);
                alert(error.response.statusText);
            }
        }
    },
    created() {
        this.getQuestionData();
    }
}
</script>

этот login.html регистрирует пользователя, но не сохраняет токен

{% extends "auth_layout.html" %}
{% load widget_tweaks %}

<script>
async function loginUser(event) {
    event.preventDefault();

    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    console.log('a')
    try {
        console.log("s")
        const response = await fetch("http://127.0.0.1:8000/auth/token/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ username: username, password: password })
        });

        if (!response.ok) {
            throw new Error('Login failed');
        }

        const data = await response.json();
        const authToken = data.auth_token;

        localStorage.setItem('authToken', authToken);

        console.log('Token:', authToken);
        window.location.href = '/';
    } catch (error) {
        console.error('Login failed:', error.message);
    }
}
</script>

{% block content %}
<h1 class="text-light">QuestionTime</h1>
<p class="text-light mb-4">Share Your Knowledge!</p>
<div class="form-container">
    <form id="loginForm" method="POST" onsubmit="loginUser(event)">
        {% csrf_token %}

        <div class="form-floating mb-3">
            {% render_field form.username class="form-control" id="username" placeholder="Username" %}
            <label for="username">Username</label>
        </div>

        <div class="form-floating mb-3">
            {% render_field form.password class="form-control" id="password" placeholder="Password" %}
            <label for="password">Password</label>
        </div>

        {% if form.errors %}
            <div class="text-danger my-3">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-lg btn-primary">Login</button>
        </div>
    </form>
</div>
{% endblock %}

urls.py

path("accounts/", include("django.contrib.auth.urls")),

settings.py

LOGIN_URL = "/accounts/login/"

он должен регистрировать пользователя и сохранять auth-токен

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