Djoser logout from Vue Frontend

Currently using Vue as my frontend and Django as backend API. Trying to have user logged out when clicking on logout button. Not sure what is all needed in order to log user out.

When I click on the logout button, nothing is happening and just pushing to /logout route where I have the router linked to the file. When I click the logout button, user is still logged in. Not worried about the routing, but more concerned about actually being able to log out.

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))
                        }
                    })
            }
        }
    }

Any and all help is greatly appreciated!

Back to Top