Simple Movies web app with Vue, Vuetify and Django. Part 2: Login
Just a moment… If you are reading this, you will definitely be interested in my complete 3-part series on how to host a Flask API and a Vue interface using NGINX, use MySQL to store data and use PHPMyAdmin to interact with your database — all running in docker containers!
In the first part of this tutorial, we went through setting up a new project with Vue and Django. In this tutorial, we will go through the process of logging in. In this and subsequent parts I will be starting with the server logic before proceeding to the client logic.
Server
First, cd into the server directory and run migrations.
We then need to create a super user. We will use this super user account for this login tutorial.
Open the testlogin projects (server and client) in an editor or IDE. I personally use Visual Studio Code
This is the structure of the server folder.
We need to register the movies app and also add settings for Django CORS headers and also Django REST framework in the server/settings.py
Add movies, rest_framework, rest_framework.authtoken and corsheaders to your INSTALLED_APPS
Then follow the following Instructions on how to add Django REST Framework and Django CORS Headers settings to your settings.py file.
This should be the finished settings.py file
The JWT_AUTH part controls the JWT package. In it, I have set that sessions expire after 86400 seconds (24 hours). Of course in a real scenario your value should be less than that.
The CORS_ORIGIN_WHITELIST lists the origins that can use the API. Note that I added localhost and localhost:8080, this is because our client runs on localhost:8080. If yours is different, change it.
Now let us run migrations again.
We will do everything in the movies app. Therefore the first thing will be to create the Models, Serializers, Views and API endpoints in urls.py
Run migrations to create the tables in the database.
In this section, we will only deal with login. Therefore, lets do that. Edit your server/urls.py to look like this.
Note that we have imported the obtain_jwt_token view and added it to our paths (urls in Django < 2). This url endpoint receives username and password and returns a token which can then be used to authenticate the user when they login.
Now, head over to http://localhost:8000/auth/ and enter the username and password (the one you entered when creating a super user) in the form. You should see something like this:
This token will be required to verify the user’s identity from the front end.
Client
This is the folder structure for the client app.
We will be dealing with the src folder throughout this tutorial.
In the src folder, open the App.vue file and delete everything and replace it with this.
We are then going to create two pages: Auth and Movies. The Auth page will deal with authentication and the movies page will deal with showing movies and allowing users to comment on them.
In the src folder, open the components folder. For now it should only have HelloWorld.vue. Create a folder and call it pages. It will hold our pages.
Also, create the following folders inside src/components: forms to hold our forms, comps to hold any other component eg the menu, list of movies, list of components e.t.c
Inside the pages folder, create two Files: Auth.vue and Movies.vue. This should be your components/src folder structure now.
Lets modify our src/router/index.js file to point to our two new pages.
We can then modify our Auth.vue to look like this
The components like v-container are vuetify components that make it easier for you to design material design interfaces.
For the Movies.vue component:
Note that there is a method called checkLoggedIn which redirects to the auth page. By now that’s all it does but later we will use it to check whether the user is logged in or not. If the user is not logged in, they should be redirected to the auth page.
Now if you run npm run dev in the client folder and open localhost:8080 you should see the following page:
If you check the Auth.vue code, the Login Button runs a function callled login when clicked, the function will run the logic of logging in. We can now modify it to enable us to login.
If we send a username and password to localhost:8000/auth we get a token. This token will be used to authenticate the user whenever they login.
To ensure that the user input is valid, we can use rules to verify user input.
Modify the main.js file in order to register vue-session:
Then add the login logic to Auth.vue
However, if you login with the right username and password, you still see the login page. This is because of the checkLoggedIn function in Movies.vue, lets take care of that.
Now, when you log in with the right credentials you are shown the Movies.vue component, however, if you navigate to localhost:8080/ in a new browser tab, you will be redirected to the login page.
In our next tutorial we will build the API endpoints and link them to the client.
Cheers!
