In this tutorial, we will learn how to build a full stack Spring Boot + Vue.js Authentication example. The back-end server uses Spring Boot with Spring Security for JWT authentication and Spring Data JPA for interacting with database. The front-end will be created with Vue and Vuex. We’ll also use vee-validate to perform Form validation and vue-fontawesome for make our UI more comfortable to view.

It will be pretty long, but interesting. Let’s get started.

JWT (JSON Web Token)

Nowaday, JWT is popular for Authentication and Information Exchange. Instead of creating a Session (Session-based Authentication), Server encodes data into a JSON Web Token and send it to the Client. The Client saves the JWT, then every Request from Client to protected routes or resources should be attached that JWT (commonly at header). The Server will validate that JWT and return the Response.

Comparing with Session-based Authentication that need to store Session on Cookie, the big advantage of JWT (Token-based Authentication) is that we store the Token on Client side: Local Storage for Browser, Keychain for IOS and SharedPreferences for Android… So we don’t need to build another backend project that supports Native Apps or an additional Authentication module for Native App users.

There are three important parts of a JWT: Header, Payload, Signature. Together they are combined to a standard structure: header.payload.signature.

The Client typically attact JWT in Authorization header with Bearer prefix:

Authorization: Bearer [header].[payload].[signature]

For more details, you can visit:

In-depth Introduction to JWT-JSON Web Token

Spring Boot Vue.js Authentication example

It will be a full stack, with Spring Boot for back-end and Vue.js for front-end. The system is secured by Spring Security with JWT Authentication.

• User can signup new account, login with username & password.
• Authorization by the role of the User (admin, moderator, user)

Screenshots

The images below shows screenshots of our Vue.js App.

– Anyone can access a public page before logging in:

– A new User can signup:

– After signup is successful, User can login. When it’s done, App directs the User to Profile page:

#vuejs #javascript #vue #vue-js