如何解决如果未登录,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 举报,一经查实,本站将立刻删除。