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

Posted 2023-03-07

【中文标题】防止 Nuxt 身份验证重定向到 400 状态

【英文标题】：Prevent Nuxt auth from redirecting on 400 status

【发布时间】：2021-10-23 08:18:12

【问题描述】：

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

这是我的 nuxt 配置文件

export default 
    s-s-r: 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', s-s-r: false ,
         src: '~/plugins/swiper-plugin.js', s-s-r: false ,
         src: '~/plugins/vue-notification.js', s-s-r: false ,
         src: '~/plugins/lazyLoad.js', s-s-r: 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"
                    
                    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"
                    
                    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>

【问题讨论】：

如果在登录组件中添加auth: false 会怎样？

顺便说一句 s-s-r: false 已弃用。现在你应该使用mode: client。

没用....我花了一整天的时间，请帮忙！！！

仍然不确定实际问题。你能解释清楚一点吗？

当我点击登录按钮时，如果出现错误，我会被重定向到主页，但不会发生这种情况。相反，我想显示我从后端收到的错误（例如密码不正确或电子邮件错误）

【参考方案1】：

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

【参考方案2】：

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

nuxt.config.js

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

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

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

nuxt.config.js

router: 
  middleware: ['auth'],