防止 Nuxt 身份验证重定向到 400 状态

Question

我有 nuxt 应用程序，用户可以在其中登录/注册表单。我正在使用 nuxt auth 模块进行身份验证。注册表工作正常。我唯一担心的是当用户登录时，如果他在第一次被重定向到主页时输入了错误的电子邮件或密码。但是每当我再次进入登录页面而不刷新我的应用程序/浏览器时，如果他使用错误的凭据登录，他就不会获得重定向并且一切正常。所以问题是每次我重新加载我的浏览器/应用程序时，第一个行为是他被重定向到主页，之后一切都修复了。

这是我的 nuxt 配置文件

export default {
    ssr: false,
    head: {
        titleTemplate: 'Lokazz',
        title: 'Lokazz',
        meta: [
            { charset: 'utf-8' },
            {
                name: 'viewport',
                content: 'width=device-width, initial-scale=1'
            },
            {
                hid: 'description',
                name: 'description',
                content:
                    'Martfury - Multipurpose Marketplace Vuejs Ecommerce Template'
            }
        ],
        link: [
            {
                rel: 'stylesheet',
                href:
                    'https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin-ext'
            }
        ]
    },

    css: [
        'swiper/dist/css/swiper.css',
        '~/static/fonts/Linearicons/Font/demo-files/demo.css',
        '~/static/fonts/font-awesome/css/font-awesome.css',
        '~/static/css/bootstrap.min.css',
        '~/assets/scss/style.scss'
    ],

    plugins: [
        { src: '~plugins/vueliate.js', ssr: false },
        { src: '~/plugins/swiper-plugin.js', ssr: false },
        { src: '~/plugins/vue-notification.js', ssr: false },
        { src: '~/plugins/lazyLoad.js', ssr: false },
    ],

    

    buildModules: [
        '@nuxtjs/vuetify',
        '@nuxtjs/style-resources',
    ],

    styleResources: {
        scss: './assets/scss/env.scss'
    },

    modules: ['@nuxtjs/axios', 'nuxt-i18n','vue-sweetalert2/nuxt', '@nuxtjs/auth-next'],

    i18n: {
        locales: [
            { code: 'en', file: 'en.json' },
            { code: 'fr', file: 'fr.json' }
        ],
        lazy: true,
        defaultLocale: 'en',
        langDir: 'lang/locales/'
    },

    router: {
        linkActiveClass: '',
        linkExactActiveClass: 'active'
    },

    server: {
        port: 4002,
        host: 'localhost'
    },
    auth: {
        strategies: {
          local: {
              token: {
              property: 'token',
              global: true,
              // required: true,
              // type: 'Bearer'
            },
            user: {
              property: 'user',
              autoFetch: false
            },
            endpoints: {
              login: { url: 'http://localhost:5000/login', method: 'post' },
              logout: { url: '/api/auth/logout', method: 'post' },
              user: { url: '/api/auth/user', method: 'get', }
            }
          }
        }
      }
};

我的登录组件

<template lang="html">
    <form @submit.prevent="loginAuth">
        <div class="ps-form__content">
            <h5>Accéder á votre compte</h5>
            <ul>
                <li style="color:red" v-for="(error, index) in errors" :key="index">
                {{ error }}
                </li>
            </ul>
            <div class="form-group">
                <v-text-field
                    v-model="login.email"
                    class="ps-text-field"
                    :error-messages="emailErrors"
                    @input="$v.email.$touch()"
                    placeholder="Tapez votre email"
                    height="50"
                    outlined
                />
            </div>
            <div class="form-group">
                <v-text-field
                    v-model="login.password"
                    type="password"
                    class="ps-text-field"
                    :error-messages="passwordErrors"
                    @input="$v.password.$touch()"
                    placeholder="Tapez votre mot de passe"
                    height="50"
                    outlined
                />
            </div>
            <div class="form-group">
                <button
                    type="submit"
                    class="ps-btn ps-btn--fullwidth mt-2" @click.prevent="loginAuth"  >
                    Loginnnnn
                </button>
            </div>
        </div>
        <div class="ps-form__footer">
            <router-link class="registerLink" to="/account/register">
                   Don't have an account? Register
            </router-link>
        </div>
    </form>
</template>

<script>
import { email, required } from 'vuelidate/lib/validators';
import { validationMixin } from 'vuelidate';
import { mapState } from 'vuex';

export default {
    name: 'Login',

    data() {
        return {
            errors: [],
            login: {
                email: null,
                password: null,
            }
        };
    },
    computed: {
        emailErrors() {
            const errors = [];
            if (!this.$v.email.$dirty) return errors;
            !this.$v.email.required && errors.push('This field is required');
            return errors;
        },
        passwordErrors() {
            const errors = [];
            if (!this.$v.password.$dirty) return errors;
            !this.$v.password.required && errors.push('This field is required');
            return errors;
        },
    },
    validations: {
        email: { required },
        password: { required }
    },
    methods: {
        async loginAuth(e) {
            try {
                let response = await this.$auth.loginWith('local', { data: this.login })
                console.log(response)
            } catch (err) {
                // this.errors = err.response.data
                console.log(err.response)
            }
        },
    }
};
</script>

<style lang="scss" scoped>

.registerLink {
    color:#1976d2;
}

</style>

Answer 1

我终于解决了这个问题。这是由于用户获取属性。因为我以正确的方式发回用户信息，所以调用导致错误自动重定向到回调 url。

Answer 2

我的auth 模块确实有这种附加配置

nuxt.config.js

auth: {
  redirect: {
    login: '/login',
    home: '/',
    logout: '/login',
    callback: false,
  },
}

不过，您还需要在 IMO 中对其进行更多调试。

哦，别忘了将auth 也作为全局中间件传递

nuxt.config.js

router: {
  middleware: ['auth'],
}