Build a Twitter Clone With Adonis and Vue

User Logout

The last feature our Tweetr app is going to have is ability for user to logout. When users log in, we save their JWT tokens returned from our API to localstorage. All we have to do to log users out is to simply delete the token from localstorage.

To do that, open src/components/User/UserSidebar.vue and update as below:

// src/components/User/UserSidebar.vue

<!-- update the logout link as below -->
<a class="item" @click="logout">
    <i class="sign out icon"></i>
</a>

// add these to `methods`
logout () {
    localStorage.removeItem('tweetr-token')

    this.$router.push('/login')
}

Once the logout link is clicked, a logout method is called. The logout method simply remove the user's token from localstorage then redirects the user to the login page.