javascript - Nuxt hitelesítés felhasználó visszaállítása böngészőfrissítés után

Egy alkalmazást építek fel felhasználói bejelentkezéssel és regisztrációs információkkal. A nuxt/auth modult használom az autentikáció kezelésére. Amikor a felhasználó bejelentkezik, az állapot probléma nélkül true értékre változik. Az egyetlen probléma, amivel szembesülök, hogy amikor a set user metódust hívom, a felhasználói információk sikeresen rögzítésre kerülnek, de amikor frissítem a böngészőt, elveszítem a felhasználói adatokat, még akkor is, ha kezdetben sikeresen beállítottam őket.

a nuxt.js konfigurációm a nuxt auth modulhoz

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
            }
          }
        }
      },

Az én regisztrációs/bejelentkezési komponensem

        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)
                })
            }
            
        }

Amikor először a konzolra írom a state-et és a felhasználót, minden rendben működik

  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

kérlek, segíts

Válasz #1

A probléma megoldva. Amit csináltam, az az volt, hogy hozzáadtam a bejelentkező funkciómhoz

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

Úgy működik, mint a varázslat.

Válasz #2

Ugyanazzal a problémával küzdök. Miután hozzáadtam ezt: $auth.$storage.setUniversal('user', response.data.user, true), a felhasználó kijelentkezik a lap frissítése után.

Itt van a kódom:

  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");

és az én nuxt.config-om :

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,
        },
      },
    },
  },