جافاسكريبت - إعادة ضبط مستخدم Nuxt auth بعد تحديث المتصفح

أنا أقوم ببناء تطبيق يحتوي على تسجيل دخول وتسجيل معلومات المستخدم. أستخدم وحدة nuxt/auth للتعامل مع المصادقة. كلما قام المستخدم بتسجيل الدخول، تتغير الحالة إلى true بدون مشكلة. المشكلة الوحيدة التي أواجهها هي أنه عند استدعاء طريقة تعيين المستخدم، يتم تسجيل معلومات المستخدم بنجاح، ولكن كلما قمت بتحديث المتصفح أفقد بيانات المستخدم على الرغم من أنه تم تعيينها بنجاح في البداية.

إعداداتي في nuxt.js لوحدة مصادقة nuxt

auth: {
        strategies: {
          local: {
            token: {
              property: "token",
              global: true,
            },
            redirect: {
                "login": "/account/login",
                "logout": "/",
                "home": "/page/ajouter-produit",
                "callback": false
            },
            endpoints: {
              login: { url: "http://localhost:5000/login", method: "post" },
              logout: false, //  we don't have an endpoint for our logout in our API and we just remove the token from localstorage
              user:false
            }
          }
        }
      },

مكون التسجيل/تسجيل الدخول الخاص بي

        async typeForm(e) {
            this.typesubmit = true;
            // stop here if form is invalid
            this.$v.$touch();
            if (this.$v.typeform.$anyError) {
                return;
            }
            const user = await axios.post(`${baseUrl}register`,{
                username:this.typeform.username,
                password:this.typeform.password,
                email:this.typeform.email,
                tel:this.typeform.tel,
                adresse:this.typeform.adresse,
                store:this.typeform.store,
            })
            .then(response => {
                console.log(response.data)
                return response.data.user;
            }).catch( (error) => {
                this.error = ''
                this.error = error.response.data
            })

            if(user){
                let loginData = {email:this.typeform.email,  password:this.typeform.password} 
                const response = await this.$auth.loginWith('local', { data: loginData})
                .then(response => {
                this.$auth.setUser(response.data.user) // the user is set without a problem, everything works fine.
                return response.data;
                }).catch( (error) => {
                    this.errors = error.response.data
                    console.log(error.response)
                })
            }
            
        }

عندما أقوم بعرض الحالة والمستخدم في وحدة التحكم في المقام الأول، كل شيء يعمل بشكل جيد

  console.log(this.$store.state.auth.user) // logs all user data i get from the api call. but when i refresh i get an empty object 
  console.log(this.$store.state.auth.loggedIn) // logs true , and even after i refresh it's still true

من فضلك ساعد

الإجابة رقم 1

تم حل المشكلة. ما فعلته هو أن أضفت إلى وظيفة تسجيل الدخول الخاصة بي

this.$auth.$storage.setUniversal('user', response.data.user, true)

يعمل كالماكينة الساحرة.

الإجابة رقم 2

لدي نفس المشكلة. بعد إضافة هذا: $auth.$storage.setUniversal('user', response.data.user, true)، يتم تسجيل خروج المستخدم بعد تحديث الصفحة.

إليك شفرتي:

  this.$auth
    .loginWith("local", {
      data: {
        email: this.connexionLogin,
        password: this.connexionPassword
      }
    })
    .then( (response) => {
        this.$auth.setUser(response.data.user);
        this.$auth.$storage.setUniversal('user', response.data.user, true)
  
        this.$emit("connexionOk");

وملف nuxt.config الخاص بي :

auth: {
    watchLoggedIn: true,
    resetOnError: true,
    redirect: {
      login: "/admin/login",
      logout: "/admin/login",
      callback: "/callback",
      home: '/admin/', // Pour ne pas être redirigé vers la home suite authentification
    },
    strategies: {
      local: {
        token: {
          property: "tokens.access.token",
        },
        user: {
          property: 'user',
          autoFetch: false
        },
        endpoints: {
          login: {
            url: "v1/auth/login",
            method: "post",            
          },
          logout: false,
        },
      },
    },
  },