Get user informations in VueJS with a NestJs backend

Question

So i'm creating an NestJS API with a VueJS frontend. I have used passportjs to serialize user info, you can read it below :

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

}

My API is working fine, but i don't know how to retrieve user data in my frontend app. I have this code in one of my view, but i have nothing in my User object.

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

For information, i'm using axios.

It's a project that i do in order to learn how to do API, and i have chosen VueJS because apparently it's more "easy" that Angular. If you have advices, i'll gladly take them.

Thanks in advance for your answers.

tony19 · Accepted Answer · 2022-07-16 05:06:55Z

You are not initializing the user property in the data function.

As per the documentation:

Since Vue doesn’t allow dynamically adding root-level reactive properties, you have to initialize Vue instances by declaring all root-level reactive data properties upfront, even with an empty value.

You should add it like this:

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

Also there's no need for the let self = this because the arrow function is already taking care of using the context of its containing block, namely the getUserData function.

Having that said there's also no need to use this.$set in this case because this type of property declaration is reactive (Vue.set or its local version this.$set are generally used in cases where you need to make changes to properties that cannot be detected by Vue's reactivity system).

You can just do:

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

Check out the docs for more info about Vue and its reactivity system.

Collectives™ on Stack Overflow

Get user informations in VueJS with a NestJs backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related