Djoser logout из Vue Frontend

В настоящее время я использую Vue в качестве фронтенда и Django в качестве бэкенда API. Пытаюсь сделать так, чтобы пользователь выходил из системы при нажатии на кнопку выхода. Не уверен, что именно нужно для выхода пользователя из системы.

Когда я нажимаю на кнопку выхода из системы, ничего не происходит, а просто происходит переход на маршрут /logout, где у меня находится маршрутизатор, связанный с файлом. Когда я нажимаю на кнопку выхода, пользователь все еще входит в систему. Я не беспокоюсь о маршрутизации, но больше беспокоюсь о том, чтобы действительно иметь возможность выйти из системы.

Login

export default {
    name: 'Login',
    data () {
        return {
            username: '',
            password: '',
            errors: []
        }
    },
    methods: {
        submitForm(e) {
            axios.defaults.headers.common["Authorization"] = ""

            localStorage.removeItem("token")

            const formData = {
                username: this.username,
                password: this.password 
            }

            axios
                .post("/api/v1/token/login/", formData)
                .then(response => {
                    const token = response.data.auth_token

                    this.$store.commit('setToken', token)

                    axios.defaults.headers.common["Authorization"] = "Token " + token

                    localStorage.setItem("token", token)

                    this.$router.push('/project-dashboard')
                })
                .catch(error => {
                    if (error.response) {
                        for (const property in error.response.data) {
                            this.errors.push(`${property}: ${error.response.data[property]}`)
                        }

                        console.log(JSON.stringify(error.response.data))
                    } else if (error.message) {
                        console.log(JSON.stringify(error.message))
                    } else {
                        console.log(JSON.stringify(error))
                    }
                })
        }
    }
}

Logout

export default {
        name: 'Logout',
        data () {
        return {
            username: '',
            password: '',
            errors: []
        }
        },
        methods: {
            onclick(e) {
                axios.defaults.headers.common["Authorization"] = ""

                const formData = {
                username: this.username,
                password: this.password 
                }
    
                axios
                    .post("/api/v1/token/logout/", formData)
                    .then (response => {
                    console.log(response)
                    const token = response.data.auth_token

                    localStorage.removeItem("token")

                    axios.defaults.headers.common["Authorization"] = "Token " + token

           


                    this.$router.push('/login')
                     })
                    .catch(error => {
                        if (error.response) {
                            for (const property in error.response.data) {
                                this.errors.push(`${property}: ${error.response.data[property]}`)
                            }
    
                            console.log(JSON.stringify(error.response.data))
                        } else if (error.message) {
                            console.log(JSON.stringify(error.message))
                        } else {
                            console.log(JSON.stringify(error))
                        }
                    })
            }
        }
    }

Любая помощь будет высоко оценена!

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