Nuxt auth not redirecting after logout

Question

I just started playing with Nuxt for my current project. I am using DRF as the backend, and the local auth strategy with nuxt-auth works really well. However, when I log out, I have to refresh the page to go to the login page.

Here's my index.vue:

<template>
    <div>
        <Navbar />
        <Profile  />
        <PostForm />
        <Records />
        <Footer />
        <button @click="$auth.logout()"> Logout </button>
    </div>
</template>

<script>
import Records from '../components/Records.vue';
import Profile from '../components/Profile.vue';
import PostForm from '../components/PostForm.vue';

export default {
    middleware: ['auth',], // or, 'auth' as a string
    
    components: {
        Records, Profile, PostForm
    }
}
</script>

And here's my auth settings:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'rest-auth/login/',
            method: 'post',
            propertyName: 'key',
          },
          logout: { url: 'rest-auth/logout/', method: 'post' },
          user: {
            propertyName: 0,
            url: '/profile-model',
            method: 'get',
          },
        },
        tokenType: 'Token',
        tokenName: 'Authorization',
      },
      redirect: {
        login: '/login',
        logout: '/login',
        home: '/',
      },
}

I have been through the documentation multiple times, but still can't figure out why I don't get redirected to login/ when I click the Log Out button on my logged in index.vue. Of course, I can write some middleware, but I thought the library provides the option by default.

Answer 1

Since posting the question, I have been using this solution:

export default {
    methods:  {
        async logout () { 
            await this.$auth.logout() 
            this.$router.push('login');
        }
    }
}

And then I would just use <button @click="logout()"> Logout </button> in the template. This successfully logs me out and lands me straight on the login page. (Personally, I believe it's too hacky, and I think there are better solutions.)

Update and the correct solution: @Iman_Shafiei rightly pointed out the issue: "you put the redirect property inside the strategies."

Hence, the right config is:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'rest-auth/login/',
            method: 'post',
            propertyName: 'key',
          },
          logout: { url: 'rest-auth/logout/', method: 'post' },
          user: {
            propertyName: 0,
            url: '/profile-model',
            method: 'get',
          },
        },
        tokenType: 'Token',
        tokenName: 'Authorization',
      },
    },
    redirect: {
        login: '/login',
        logout: '/login',
        home: '/',
    },
  },

Answer 2

set rewriteRedirects to false, If enabled, user will redirect back to the original guarded route instead of redirect.home

Answer 3

you must call logout function like this and call logout nuxt api

logout() {
    this.$auth.logout();
  }

after call go to nuxt config and set setting like this

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/*login api*/',
            method: 'post',
            propertyName: 'token',
          },
          logout: { url: '/*logout api*/', method: 'post' },
          user: false,
        }
      },
    },
    redirect: {
      logout: '/*login page route*',
    },
    watchLoggedIn: true,
  },