注销后 Nuxt 身份验证不重定向

问题描述

我刚刚开始在我当前的项目中使用 Nuxt。我使用 DRF 作为后端，并且带有 nuxt-auth 的 local auth 策略非常有效。但是，当我退出时，我必须刷新页面才能进入登录页面。

这是我的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>

这是我的身份验证设置：

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: '/',}

我已经多次通过 documentation，但仍然不明白为什么当我点击登录 {{1} 上的注销按钮时我没有被重定向到 login/ }}。当然，我可以写一些中间件，但我认为库默认提供了该选项。

解决方法

自从发布问题以来，我一直在使用这个解决方案：

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

然后我会在模板中使用 <button @click="logout()"> Logout </button>。这成功地让我退出并直接进入登录页面。 （就我个人而言，我认为这太hacky，我认为有更好的解决方案。）

更新和正确的解决方案：@Iman_Shafiei 正确地指出了这个问题：“您将 redirect 属性放在 strategies 中。”

因此，正确的配置是：

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: '/',