浏览器刷新后 Nuxt auth 用户重置

Posted 2023-02-22

【中文标题】浏览器刷新后 Nuxt auth 用户重置

【英文标题】：Nuxt auth user reset after browser refresh

【发布时间】：2021-10-24 15:08:59

【问题描述】：

我正在构建一个包含用户登录和注册信息的应用。我使用 nuxt/auth 模块来处理身份验证。每当用户登录时，状态更改为 true 没有问题。我遇到的唯一问题是，当我调用 set user method 时，用户信息注册成功，但是每当我刷新浏览器时，我都会丢失用户数据，即使它首先设置成功。

我的 nuxt 身份验证模块的 nuxt.js 配置

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(`$baseUrlregister`,
                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)

像魅力一样工作。