0

我刚开始在我当前的项目中使用 Nuxt。我使用 DRF 作为后端，local使用 nuxt-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: '/',
      },
}

我已经多次阅读文档，但仍然无法弄清楚为什么login/当我单击已登录的 Log Out 按钮时我没有被重定向到index.vue。当然，我可以写一些中间件，但我认为库默认提供选项。

4

2 回答 2

2

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

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: '/',
    },
  },
于 2021-05-01T19:09:44.867 回答
0

你必须像这样调用注销函数并调用 logout nuxt api

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

通话后转到 nuxt 配置并设置这样的设置

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,
  },
于 2021-11-02T07:15:41.880 回答