64. Creating a user model

With Vue Auth now installed and set up, we can use it to manage the user's authentication state.

The first step in implementing that is to create a login form for the user to provide their credentials. This component here, LoginForm.vue is what I've partially setup for this purpose.

Now, the way we're managing state in this app is via Vuex ORM, so in order to create this form we're going to need a new Vuex ORM model.

So let's create a user model by going to the terminal and typing touch client/store/models/User.js.

$ touch client/store/models/User.js

Defining user model

Let's now open this new file and define the model. Firstly, we'll import the model class by going import { Model } from "@vuex-orm/core";.

Now, let's simultaneously define and export our model by going export default class User extends Model {}.

You'll recall from module 5 that our model will need an entity field which should be the plural of the entity, so let's put static entity = "users";.

Fields

Finally, we'll need to define the model's fields by creating a function static fields () {}.

This function will return an object with all the necessary fields, so let's go return {};.

The first property of this object will be id to which we'll assign this.string("") which will make it a string field, and will set the default value to an empty string.

[copy this.string(""), to the clipboard ]

Next, let's create a name field with the same assignment, an email field, and a password field.

Perhaps you'll recall that those four fields are the same fields that we created way back in module 4 in our API user entity.

store/models/User.js

import { Model } from "@vuex-orm/core";

export default class User extends Model {
  static entity = "users";

  static fields () {
    return {
      id: this.string(""),
      name: this.string(""),
      email: this.string(""),
      password: this.string("")
    };
  }
}

Registering user model

Let's now register the new model in the database by first importing the User model into our store index file. So we'll go import User from "./models/User";.

We'll then add database.register(), passing in the User schema as the first argument, and an empty object as the second argument because we won't need a module for this model.

client/store/index.js

import User from "./models/User";

...
database.register(User, {});

With the User model now registered, we can use it to manage the data in our login form.

Auth view

Both the login and registration forms are child components of the Auth view that you can see on the screen now.

Whenever we enter this view, we'll need to create a new User model instance that can be used by these forms to manage the form data.

Obviously, a new model instance will need an ID. But, before the user is retrieved from the server, we don't know their real ID, so we'll need to use a temporary one.

I've created a temporary ID as a constant in our constants file. This is useful because now we can refer to this temporary user instance in any of our components.

So let's import this constant into this view. It's called TEMP_USER_ID and we can add it to the existing constant import here.

client/views/Auth.vue

import { ROUTE_NAME_LOGIN, ROUTE_NAME_REGISTER, TEMP_USER_ID } from "@/constants";

Creating a user instance

Let's now create the user model instance. We'll begin by importing the user model at the top of the file.

Next, let's add a created hook to our component definition. Inside this, we'll first check if the temporary user model already exists by going if (!User.find(TEMP_USER_ID)) {}.

Why might the user model already exist? Consider the case where the user might login and then logout and the try and login again, all the app session.

Anyway, iff the user model doesn't exist, let's create a new one by calling User.create();. We'll then pass an object to this defining the new user. So we'll go { data: { id: TEMP_USER_ID } }.

Of course all the other fields of the model will be blank for now, as that data gets supplied by the form.

client/views/Auth.vue

...
import User from "@/store/models/User";

export default {
  ...
  created () {
    if (!User.find(TEMP_USER_ID)) {
      User.create({ data: { id: TEMP_USER_ID } });
    }
  }
};
Discussion

0 comments