如果未登录，Nuxt Auth端点将拨打302个电话

问题描述

在localhost：3000上运行的NuxtJS应用程序（非SPA）

在localhost：3001上运行的Hapi API

我的index.vue

<template>
  <section class="hero">
    <div class="hero-body">
      <div class="container">
        <div class="title">
          Welcome! :) You are logged in: {{ loggedIn }}
        </div>
        <template v-if="loggedIn">
          <p>You are logged in.</p>
          <p>Your email is: {{ user.username }}</p>
        </template>
        <template v-else>
          <Register />
          <p class="has-text-centered">
            or
          </p>
          <NuxtLink to="/login" class="button is-fullwidth is-success">
            Login
          </NuxtLink>
        </template>
      </div>
    </div>
    <button @click="logout()">
      logout
    </button>
  </section>
</template>

<style>
  body {
    background-color: darkslategray;
    color: white !important;
  }
</style>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('auth',['loggedIn','user'])
  },methods: {
    async logout () {
      await this.$auth.logout()
    }
  }
}
</script>

我的nuxt.conf.js

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'nuxt_example_2020',Meta: [
      { charset: 'utf-8' },{ name: 'viewport',content: 'width=device-width,initial-scale=1' },{ hid: 'description',name: 'description',content: '' }
    ],link: [
      { rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' }
    ]
  },// Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
  ],// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/repository'
  ],// Auto import components (https://go.nuxtjs.dev/config-components)
  components: true,// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module','@nuxtjs/fontawesome'
  ],// Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    '@nuxtjs/bulma',// https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',// https://auth.nuxtjs.org
    '@nuxtjs/auth'
  ],router: {
  },// Axios module configuration (https://go.nuxtjs.dev/config-axios)
  axios: {
    baseURL: 'http://localhost:3001',credentials: true
  },auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: 'login',method: 'post',propertyName: false
          },logout: {
            url: 'logout',method: 'get'
          },user: {
            url: 'profile',method: 'get',propertyName: false
          }
        },tokenrequired: false,tokenType: false,// autoFetchUser: false
      }
    }
  },fontawesome: {
    icons: {
      solid: ['faUser','faLock']
    }
  },// Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    postcss: {
      preset: {
        features: {
          customProperties: false
        }
      }
    }
  }
}

现在，如果我转到localhost：3000，则可以登录或注册。现在，我按登录按钮，填写表格，按“登录”并获得登录。然后我可以看到“注销”按钮。我按注销按钮，然后注销。在API上，基本上是：

127.0.0.1: OPTIONS /login --> 204
127.0.0.1: POST /login --> 200
127.0.0.1: OPTIONS /profile --> 204
127.0.0.1: GET /profile --> 200
127.0.0.1: OPTIONS /logout --> 204
logged out
127.0.0.1: GET /logout --> 200

现在，如果我尚未登录，然后再次按注销，则会显示以下内容：

127.0.0.1: GET /logout --> 200
127.0.0.1: OPTIONS /logout --> 204
127.0.0.1: GET /logout --> 302
Debug: handler,error 
    Error: Not Found
127.0.0.1: OPTIONS /login --> 404

该错误不足为奇，因为我的API上没有针对/ login的GET，为什么会这样？

操作：加载localhost：300，然后登录并注销，然后在没有登录的情况下再次注销，如下所示：

我很难看到这里发生了什么。我不明白为什么auth模块在我们已经注销的情况下向/ login发送GET请求，以及为什么向/ logout发送302请求。我看不到状态依赖。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

authentication hapi nuxt.js