通过NestJs后端在VueJS中获取用户信息

编程问答 2022-08-12

问题描述

因此，我正在使用VueJS前端创建nestJS API。我已经使用passportjs序列化了用户信息，您可以在下面阅读：

@Injectable()
export class SessionSerializer extends PassportSerializer {
  serializeUser(user: any,done: (err: Error,user: any) => void): any {
    done(null,user);
  }
  deserializeUser(payload: any,payload: string) => void): any {
    done(null,payload);
  }

}

我的API工作正常，但是我不知道如何在前端应用程序中检索用户数据。在我的一种观点中，我有这段代码，但是在User对象中什么也没有。

<script>
  import UserDataService from 'src/services/UserDataService';

  export default {
    name: 'UserProfile',data () {
      return {
        
      }
    },methods: {
      getUserData: function () {
        let self = this
       UserDataService.getUser()
          .then((response) => {
            console.log(response)
            self.$set(this,"user",response.data.user)
            console.log(response.data.user.id)
          })
          .catch((errors) => {
            console.log(errors)
          })
      }
    },mounted () {
      this.getUserData()
    }
  }
</script>

有关信息，我正在使用axios。

这是我为了学习如何使用API​​而要做的一个项目，我之所以选择VueJS，是因为它显然比Angular更“容易”。如果您有建议，我会很乐意接受。

预先感谢您的回答。

解决方法

您没有在user函数中初始化data属性。

根据文档：

由于Vue不允许动态添加根级反应性属性，因此您必须通过预先声明所有根级反应性数据属性（即使值为空）来初始化Vue实例。

您应该这样添加它：

data () {
 return {
   user: {} // you may initialize it with the value that you think it's more convenient
 }
}

也不需要let self = this，因为arrow函数已经在使用其包含块的上下文，即getUserData函数。

在此情况下，也无需使用this.$set，因为这种类型的属性声明是反应性的（Vue.set或其本地版本this.$set通常用于需要更改Vue反应系统无法检测到的属性的情况。

您可以这样做：

getUserData: function () {
  UserDataService.getUser()
    .then((response) => {
      console.log(response)
      this.user = response.data.user
      console.log(response.data.user.id)
    })
    .catch((errors) => {
      console.log(errors)
    })
}

查看文档以获取有关Vue及其reactivity system的更多信息。

expressexpressexpressnestjspassport.jsvue.js