Web application on Kotlin + Spring Boot + Vue.js
Good afternoon, dear inhabitants of Habr!
Not so long ago, I had the opportunity to implement a small project without special technical requirements. That is, I was free to choose the technology stack at my discretion. That’s why I didn’t miss the opportunity to “feel” thefashionable, youthful, promising, but unfamiliar to me Kotlin and Vue.js in practice, adding the already familiar Spring Boot and trying it all on an uncomplicated web application.
Having embarked, I recklessly believed that there would be many articles and manuals on the subject on the Internet. The materials are really enough, and they are all good, but only up to the first REST controller. Then the difficulties of contradiction begin. But even in a simple application, I would like to have more complex logic than drawing on the page the text returned by the server.
Having sorted it out somehow, I decided to write my own manual, which, I hope, will be useful to someone.
This material is a guide to the “quick start” of developing a web application with a backend on Kotlin + Spring Boot and a frontend on Vue.js. I must say right away that I am not “drowning” for them and not talking about any unequivocal advantages of this stack. The purpose of this article is to share experiences.
The material is designed for developers with experience with Java, Spring Framework / Spring Boot, React / Angular, or at least pure JavaScript. Suitable for those who do not have such experience - for example, novice programmers, but, I'm afraid, then you will have to figure out some details on your own. In general, some aspects of this guide should be considered in more detail, but I think it is better to do this in other publications, so as not to deviate much from the topic and not make the article cumbersome.
Perhaps it will help someone to form an idea of ​​the backend development on Kotlin without having to dive into this topic, and someone - to reduce the time spent on the basis of the already prepared application skeleton.
Despite the description of specific practical steps, in general, in my opinion, the article has an experimental review character. Now this approach, and the question itself is seen, is more likely as a hipster idea - to collect as many fashionable words in one place. But in the future, perhaps, it will occupy its niche in enterprise development. Perhaps there are beginner (and continuing) programmers among us who have to live and work at a time when Kotlin and Vue.js will be as popular and in demand as Java and React are now. After all, Kotlin and Vue.js really have high expectations.
During the time that I wrote this guide, similar publications, such as this one, have already begun to appear on the web. I repeat, there are enough materials where the order of actions to the first REST controller is understood, but it would be interesting to see more complex logic - for example, the implementation of authentication with separation by roles, which is a rather necessary functionality. That is what I added to my own leadership.
Kotlin is a programming language that runs on top of the JVM and is developed by the international company JetBrains .
Vue.js is a JavaScript framework for developing single-page reactive-style applications.
As a development environment, I would recommend using IntelliJ IDEA - a development environment from JetBrains , which has gained wide popularity in the Java community, because it has convenient tools and features for working with Kotlin right up to converting Java code into Kotlin code. However, you should not expect that in this way you can migrate the whole project, and suddenly everything will work by itself.
Happy owners of IntelliJ IDEA Ultimate Edition can install the appropriate plugin for the convenience of working with Vue.js. If you are looking for a compromise betweenfreebie price and convenience, then I highly recommend using Microsoft Visual Code with the Vetur plugin.
I believe this is obvious to many, but just in case, I remind you that the npm package manager is required to work with Vue.js. Installation instructions for Vue.js can be found on the Vue CLI website.
Maven is used as the Java project collector in this guide, PostgreSQL is used as the database server.
Create a project directory by naming, for example, kotlin-spring-vue . Our project will have two modules - backend and frontend . The frontend will be going first. Then, during assembly, the backend will copy itself index.hmtl, favicon.ico and all static files (* .js, * .css, images, etc.).
Thus, in the root directory we will have two subfolders - / backend and / frontend . However, do not rush to create them manually.
There are several ways to initialize the backend module:
In our case, the primary configuration is as follows:
pom.xml should look like this:
To initialize the frontend module, go to the project root directory and execute the command:
Then you can select all the default settings - in our case this will be enough.
By default, the module will be collected in the / dist subfolder, however we need to see the collected files in the / target folder. To do this, create the vue.config.js file directly in / frontend with the following settings:
Place the pom.xml file of the following form in the frontend module:
And finally, put pom.xml in the root directory of the project:
Important: the modules must be assembled in this order - first the frontend, then the backend.
Now we can build the project:
And, if everything is assembled, run the application:
The default Vue.js page will be available at http: // localhost: 8080 / :
Now let's create some simple REST service. For example, “Hello, [username]!” (The default is World), which counts how many times we pulled it.
For this we need a data structure consisting of a number and a string - a class whose sole purpose is to store data. Kotlin has data classes for this . And our class will look like this:
All. Now we can write the service directly.
Note: for convenience, it will take all services to a separate route / api using the @RequestMapping annotation before declaring the class:
Now restart the application and see the result http: // localhost: 8080 / api / greeting? Name = Vadim :
We will refresh the page and make sure that the counter works:
Now let's work on the frontend to beautifully draw the result on the page.
Install vue-router in order to implement navigation on the “pages” (in fact - on the routes and components, since we have only one page) in our application:
Add router.js to / src - this component will be responsible for routing:
Note: the root route ("/") will be available to us component Greeting.vue, which we will write a little later.
Now we will import our router. To do this, make changes to
Then
To execute server requests, use the AXIOS HTTP client:
In order not to write the same settings each time (for example, the request route is "/ api") in each component, I recommend putting them into the separate http-commons.js component :
Note: to avoid warnings when outputting to the console ( console.log () ), I recommend writing this line in package.json :
Now finally create a component (in / src / components )
Note:
Now let's look at the process of interacting with a database using the example of PostgreSQL and Spring Data .
First, create a test label:
and fill it with data:
Now we will supplement the application.properties file of the backend module with the database connection settings:
Note: in this form, the first three parameters refer to environment variables. I highly recommend passing sensitive parameters through environment variables or startup parameters. But, if you are sure that they will not fall into the hands of insidious attackers, then you can ask them explicitly.
Let's create an entity (entity-class) for an object-relational mapping:
And a CRUD repository to work with our table:
And finally, we will update our controller to see working with the database in action:
Launch the application, follow the link https: // localhost: 8080 / api / persons to make sure that everything works:
Now we can move on to authentication - also one of the basic functions of applications where data access is delineated.
Consider implementing your own authorization server using JWT (JSON Web Token).
Why not Basic Authentication?
Why not OAuth out of thebox Spring OAuth Security?
In addition to guests, there will be two user groups in our application - ordinary users and administrators. Let's create three tables: users - for storing user data, roles - for storing information about roles and users_roles - for linking the first two tables.
Create Entity Classes:
Create repositories for working with tables:
Add new dependencies to
And add new parameters for working with tokens in application.properties :
Now we will create classes for storing data coming from authorization and registration forms:
Let's make special classes for server responses - returning authentication token and universal (string):
We will also need the “User Already Exists” exception.
To define user roles, we need an additional service that implements the UserDetailsService interface:
To work with JWT, we need three classes:
JwtAuthEntryPoint - for handling authorization errors and further use in web security settings:
JwtProvider - to generate and validate tokens, as well as determine the user by his token:
JwtAuthTokenFilter - to authenticate users and filter requests:
Now we can configure the bean responsible for web security:
Create a controller for registration and authorization:
Finally, we supplement the BackendController with two methods: one will return data that is accessible only to the administrator (a user with ROLE_USER and ROLE_ADMIN privileges) and to an ordinary user (ROLE_USER).
Let's create some new components:
With template content (for aconvenient copy-paste start):
Add id = “ component_name ” to each div inside the template and export default {name: '[component_name]'} in the script .
Now add new routes:
We will use Vuex to store tokens and use them when querying the server . Vuex is a state management pattern + Vue.js. library It serves as a centralized data warehouse for all application components with rules to ensure that the state can only be changed in a predictable way.
Add store as a separate file to src / store :
We will make the appropriate changes to
In order for the interface to immediately look beautiful and neat even in an experimental application I use. But this, as they say, is a matter of taste, and does not affect the basic functionality:
Now let's work on the App component:
For this:
Update components:
We will register our first administrator:
Important: by default, all new users are regular users. Let's give the first administrator his authority:
Then:
Generally speaking, there are always a lot of them in any business. I will list the most obvious:
Not so long ago, I had the opportunity to implement a small project without special technical requirements. That is, I was free to choose the technology stack at my discretion. That’s why I didn’t miss the opportunity to “feel” the
Having embarked, I recklessly believed that there would be many articles and manuals on the subject on the Internet. The materials are really enough, and they are all good, but only up to the first REST controller. Then the difficulties of contradiction begin. But even in a simple application, I would like to have more complex logic than drawing on the page the text returned by the server.
Having sorted it out somehow, I decided to write my own manual, which, I hope, will be useful to someone.
What and for whom is the article
This material is a guide to the “quick start” of developing a web application with a backend on Kotlin + Spring Boot and a frontend on Vue.js. I must say right away that I am not “drowning” for them and not talking about any unequivocal advantages of this stack. The purpose of this article is to share experiences.
The material is designed for developers with experience with Java, Spring Framework / Spring Boot, React / Angular, or at least pure JavaScript. Suitable for those who do not have such experience - for example, novice programmers, but, I'm afraid, then you will have to figure out some details on your own. In general, some aspects of this guide should be considered in more detail, but I think it is better to do this in other publications, so as not to deviate much from the topic and not make the article cumbersome.
Perhaps it will help someone to form an idea of ​​the backend development on Kotlin without having to dive into this topic, and someone - to reduce the time spent on the basis of the already prepared application skeleton.
Despite the description of specific practical steps, in general, in my opinion, the article has an experimental review character. Now this approach, and the question itself is seen, is more likely as a hipster idea - to collect as many fashionable words in one place. But in the future, perhaps, it will occupy its niche in enterprise development. Perhaps there are beginner (and continuing) programmers among us who have to live and work at a time when Kotlin and Vue.js will be as popular and in demand as Java and React are now. After all, Kotlin and Vue.js really have high expectations.
During the time that I wrote this guide, similar publications, such as this one, have already begun to appear on the web. I repeat, there are enough materials where the order of actions to the first REST controller is understood, but it would be interesting to see more complex logic - for example, the implementation of authentication with separation by roles, which is a rather necessary functionality. That is what I added to my own leadership.
Content
- Quick reference
- Development tools
- Project Initialization
- REST API
- Database connection
- Authentication
- Ways to improve
- useful links
Quick reference
Kotlin is a programming language that runs on top of the JVM and is developed by the international company JetBrains .
Vue.js is a JavaScript framework for developing single-page reactive-style applications.
Development tools
As a development environment, I would recommend using IntelliJ IDEA - a development environment from JetBrains , which has gained wide popularity in the Java community, because it has convenient tools and features for working with Kotlin right up to converting Java code into Kotlin code. However, you should not expect that in this way you can migrate the whole project, and suddenly everything will work by itself.
Happy owners of IntelliJ IDEA Ultimate Edition can install the appropriate plugin for the convenience of working with Vue.js. If you are looking for a compromise between
I believe this is obvious to many, but just in case, I remind you that the npm package manager is required to work with Vue.js. Installation instructions for Vue.js can be found on the Vue CLI website.
Maven is used as the Java project collector in this guide, PostgreSQL is used as the database server.
Project Initialization
Create a project directory by naming, for example, kotlin-spring-vue . Our project will have two modules - backend and frontend . The frontend will be going first. Then, during assembly, the backend will copy itself index.hmtl, favicon.ico and all static files (* .js, * .css, images, etc.).
Thus, in the root directory we will have two subfolders - / backend and / frontend . However, do not rush to create them manually.
There are several ways to initialize the backend module:
- manually (samurai path)
- Spring Boot application project generated using Spring Tool Suite or IntelliJ IDEA Ultimate Edition
- Using the Spring Initializr , specifying the necessary settings is perhaps the most common way
In our case, the primary configuration is as follows:
Backend module configuration
- Project: Maven Project
- Language: Kotlin
- Spring Boot: 2.1.6
- Project Metadata: Java 8, JAR packaging
- Dependencies: Spring Web Starter, Spring Boot Actuator, Spring Boot DevTools
pom.xml should look like this:
pom.xml - backend
Paying attention:
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.kotlin-spring-vue</groupId> <artifactId>demo</artifactId> <version>1.0-SNAPSHOT</version> </parent> <groupId>com.kotlin-spring-vue</groupId> <artifactId>backend</artifactId> <version>0.0.1-SNAPSHOT</version> <name>backend</name> <description>Backend module for Kotlin + Spring Boot + Vue.js</description> <properties> <java.version>1.8</java.version> <kotlin.version>1.2.71</kotlin.version> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <rest-assured.version>3.3.0</rest-assured.version> <start-class>com.kotlinspringvue.backend.BackendApplicationKt</start-class> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>com.fasterxml.jackson.module</groupId> <artifactId>jackson-module-kotlin</artifactId> </dependency> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-reflect</artifactId> </dependency> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-stdlib-jdk8</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <build> <sourceDirectory>${project.basedir}/src/main/kotlin</sourceDirectory> <testSourceDirectory>${project.basedir}/src/test/kotlin</testSourceDirectory> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <mainClass>com.kotlinspringvue.backend.BackendApplicationKt</mainClass> </configuration> </plugin> <plugin> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-plugin</artifactId> <configuration> <args> <arg>-Xjsr305=strict</arg> </args> <compilerPlugins> <plugin>spring</plugin> </compilerPlugins> </configuration> <dependencies> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-allopen</artifactId> <version>${kotlin.version}</version> </dependency> </dependencies> </plugin> <plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy Vue.js frontend content</id> <phase>generate-resources</phase> <goals> <goal>copy-resources</goal> </goals> <configuration> <outputDirectory>src/main/resources/public</outputDirectory> <overwrite>true</overwrite> <resources> <resource> <directory>${project.parent.basedir}/frontend/target/dist</directory> <includes> <include>static/</include> <include>index.html</include> <include>favicon.ico</include> </includes> </resource> </resources> </configuration> </execution> </executions> </plugin> </plugins> </build> </project>
Paying attention:
- The name of the main class ends in Kt
- Copying resources from project_root / frontend / target / dist to src / main / resources / public
- Parent project (parent) represented by spring-boot-starter-parent moved to the main pom.xml level
To initialize the frontend module, go to the project root directory and execute the command:
$ vue create frontend
Then you can select all the default settings - in our case this will be enough.
By default, the module will be collected in the / dist subfolder, however we need to see the collected files in the / target folder. To do this, create the vue.config.js file directly in / frontend with the following settings:
module.exports = { outputDir: 'target/dist', assetsDir: 'static' }
Place the pom.xml file of the following form in the frontend module:
pom.xml - frontend
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <artifactId>frontend</artifactId> <parent> <groupId>com.kotlin-spring-vue</groupId> <artifactId>demo</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <frontend-maven-plugin.version>1.6</frontend-maven-plugin.version> </properties> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>${frontend-maven-plugin.version}</version> <executions> <!-- Install our node and npm version to run npm/node scripts--> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v11.8.0</nodeVersion> </configuration> </execution> <!-- Install all project dependencies --> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> <!-- optional: default phase is "generate-resources" --> <phase>generate-resources</phase> <!-- Optional configuration which provides for running any npm command --> <configuration> <arguments>install</arguments> </configuration> </execution> <!-- Build and minify static files --> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build> </project>
And finally, put pom.xml in the root directory of the project:
pom.xml
where we see our two modules - frontend and backend , and also parent - spring-boot-starter-parent .
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.kotlin-spring-vue</groupId> <artifactId>demo</artifactId> <packaging>pom</packaging> <version>1.0-SNAPSHOT</version> <modules> <module>backend</module> <module>frontend</module> </modules> <name>kotlin-spring-vue</name> <description>Kotlin + Spring Boot + Vue.js</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <main.basedir>${project.basedir}</main.basedir> <!-- Analysis Tools for CI --> <build-plugin.jacoco.version>0.8.2</build-plugin.jacoco.version> <build-plugin.coveralls.version>4.3.0</build-plugin.coveralls.version> <kotlin.version>1.2.71</kotlin.version> </properties> <dependencies> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-stdlib-jdk8</artifactId> <version>${kotlin.version}</version> </dependency> <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-test</artifactId> <version>${kotlin.version}</version> <scope>test</scope> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.jacoco</groupId> <artifactId>jacoco-maven-plugin</artifactId> <version>${build-plugin.jacoco.version}</version> <executions> <!-- Prepares the property pointing to the JaCoCo runtime agent which is passed as VM argument when Maven the Surefire plugin is executed. --> <execution> <id>pre-unit-test</id> <goals> <goal>prepare-agent</goal> </goals> </execution> <!-- Ensures that the code coverage report for unit tests is created after unit tests have been run. --> <execution> <id>post-unit-test</id> <phase>test</phase> <goals> <goal>report</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.eluder.coveralls</groupId> <artifactId>coveralls-maven-plugin</artifactId> <version>${build-plugin.coveralls.version}</version> </plugin> <plugin> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-plugin</artifactId> <version>${kotlin.version}</version> <executions> <execution> <id>compile</id> <phase>compile</phase> <goals> <goal>compile</goal> </goals> </execution> <execution> <id>test-compile</id> <phase>test-compile</phase> <goals> <goal>test-compile</goal> </goals> </execution> </executions> <configuration> <jvmTarget>1.8</jvmTarget> </configuration> </plugin> </plugins> </build> </project>
where we see our two modules - frontend and backend , and also parent - spring-boot-starter-parent .
Important: the modules must be assembled in this order - first the frontend, then the backend.
Now we can build the project:
$ mvn install
And, if everything is assembled, run the application:
$ mvn --project backend spring-boot:run
The default Vue.js page will be available at http: // localhost: 8080 / :
REST API
Now let's create some simple REST service. For example, “Hello, [username]!” (The default is World), which counts how many times we pulled it.
For this we need a data structure consisting of a number and a string - a class whose sole purpose is to store data. Kotlin has data classes for this . And our class will look like this:
data class Greeting(val id: Long, val content: String)
All. Now we can write the service directly.
Note: for convenience, it will take all services to a separate route / api using the @RequestMapping annotation before declaring the class:
import org.springframework.web.bind.annotation.* import com.kotlinspringvue.backend.model.Greeting import java.util.concurrent.atomic.AtomicLong @RestController @RequestMapping("/api") class BackendController() { val counter = AtomicLong() @GetMapping("/greeting") fun greeting(@RequestParam(value = "name", defaultValue = "World") name: String) = Greeting(counter.incrementAndGet(), "Hello, $name") }
Now restart the application and see the result http: // localhost: 8080 / api / greeting? Name = Vadim :
{"id":1,"content":"Hello, Vadim"}
We will refresh the page and make sure that the counter works:
{"id":2,"content":"Hello, Vadim"}
Now let's work on the frontend to beautifully draw the result on the page.
Install vue-router in order to implement navigation on the “pages” (in fact - on the routes and components, since we have only one page) in our application:
$ npm install --save vue-router
Add router.js to / src - this component will be responsible for routing:
router.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Greeting from '@/components/Greeting' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Greeting', component: Greeting }, { path: '/hello-world', name: 'HelloWorld', component: HelloWorld } ] })
Note: the root route ("/") will be available to us component Greeting.vue, which we will write a little later.
Now we will import our router. To do this, make changes to
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
Then
App.vue
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'app' } </script> <style> </style>
To execute server requests, use the AXIOS HTTP client:
$ npm install --save axios
In order not to write the same settings each time (for example, the request route is "/ api") in each component, I recommend putting them into the separate http-commons.js component :
import axios from 'axios' export const AXIOS = axios.create({ baseURL: `/api` })
Note: to avoid warnings when outputting to the console ( console.log () ), I recommend writing this line in package.json :
"rules": { "no-console": "off" }
Now finally create a component (in / src / components )
Greeting.vue
import {AXIOS} from './http-common' <template> <div id="greeting"> <h3>Greeting component</h3> <p>Counter: {{ counter }}</p> <p>Username: {{ username }}</p> </div> </template> export default { name: 'Greeting', data() { return { counter: 0, username: '' } }, methods: { loadGreeting() { AXIOS.get('/greeting', { params: { name: 'Vadim' } }) .then(response => { this.$data.counter = response.data.id; this.$data.username = response.data.content; }) .catch(error => { console.log('ERROR: ' + error.response.data); }) } }, mounted() { this.loadGreeting(); } }
Note:
- Query parameters are hardcoded to just see how the method works
- The function of loading and rendering data (
loadGreeting()
) is called immediately after loading the page ( mounted () ) - we imported axios already with our custom settings from http-common
Database connection
Now let's look at the process of interacting with a database using the example of PostgreSQL and Spring Data .
First, create a test label:
CREATE TABLE public."person" ( id serial NOT NULL, name character varying, PRIMARY KEY (id) );
and fill it with data:
INSERT INTO person (name) VALUES ('John'), ('Griselda'), ('Bobby');
Supplement the pom.xml of the backend module:
<properties> ... <postgresql.version>42.2.5</postgresql.version> ... </properties> ... <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>org.postgresql</groupId> <artifactId>postgresql</artifactId> <version>${postgresql.version}</version> </dependency> ... <plugin> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-plugin</artifactId> <configuration> <args> <arg>-Xjsr305=strict</arg> </args> <compilerPlugins> <plugin>spring</plugin> <plugin>jpa</plugin> </compilerPlugins> </configuration> ... <dependency> <groupId>org.jetbrains.kotlin</groupId> <artifactId>kotlin-maven-noarg</artifactId> <version>${kotlin.version}</version> </dependency>
Now we will supplement the application.properties file of the backend module with the database connection settings:
spring.datasource.url=${SPRING_DATASOURCE_URL} spring.datasource.username=${SPRING_DATASOURCE_USERNAME} spring.datasource.password=${SPRING_DATASOURCE_PASSWORD} spring.jpa.generate-ddl=true spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false spring.jpa.database-platform=org.hibernate.dialect.PostgreSQL9Dialect spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true
Note: in this form, the first three parameters refer to environment variables. I highly recommend passing sensitive parameters through environment variables or startup parameters. But, if you are sure that they will not fall into the hands of insidious attackers, then you can ask them explicitly.
Let's create an entity (entity-class) for an object-relational mapping:
Person.kt
import javax.persistence.Column import javax.persistence.Entity import javax.persistence.GeneratedValue import javax.persistence.GenerationType import javax.persistence.Id import javax.persistence.Table @Entity @Table (name="person") data class Person( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id: Long, @Column(nullable = false) val name: String )
And a CRUD repository to work with our table:
Repository.kt
Note: We will use the
method, which does not need to be redefined, so we will leave the body empty.
import com.kotlinspringvue.backend.jpa.Person import org.springframework.stereotype.Repository import org.springframework.data.repository.CrudRepository import org.springframework.data.jpa.repository.JpaRepository import org.springframework.data.repository.query.Param @Repository interface PersonRepository: CrudRepository<Person, Long> {}
Note: We will use the
findAll()
method, which does not need to be redefined, so we will leave the body empty.
And finally, we will update our controller to see working with the database in action:
BackendController.kt
import com.kotlinspringvue.backend.repository.PersonRepository import org.springframework.beans.factory.annotation.Autowired … @Autowired lateinit var personRepository: PersonRepository … @GetMapping("/persons") fun getPersons() = personRepository.findAll()
Launch the application, follow the link https: // localhost: 8080 / api / persons to make sure that everything works:
[{"id":1,"name":"John"},{"id":2,"name":"Griselda"},{"id":3,"name":"Bobby"}]
Authentication
Now we can move on to authentication - also one of the basic functions of applications where data access is delineated.
Consider implementing your own authorization server using JWT (JSON Web Token).
Why not Basic Authentication?
- In my opinion, Basic Authentication does not respond to the modern threat challenge even in a relatively safe usage environment.
- On this subject, you can find much more materials.
Why not OAuth out of the
- Because OAuth has more stuff.
- Such an approach can be dictated by external circumstances: customer requirements, architect's whim, etc.
- If you are a novice developer, then in a strategic perspective it will be useful to dig deeper with the security functionality in more detail.
Backend
In addition to guests, there will be two user groups in our application - ordinary users and administrators. Let's create three tables: users - for storing user data, roles - for storing information about roles and users_roles - for linking the first two tables.
Create tables, add constraints and populate the roles table
CREATE TABLE public.users ( id serial NOT NULL, username character varying, first_name character varying, last_name character varying, email character varying, password character varying, enabled boolean, PRIMARY KEY (id) ); CREATE TABLE public.roles ( id serial NOT NULL, name character varying, PRIMARY KEY (id) ); CREATE TABLE public.users_roles ( id serial NOT NULL, user_id integer, role_id integer, PRIMARY KEY (id) ); ALTER TABLE public.users_roles ADD CONSTRAINT users_roles_users_fk FOREIGN KEY (user_id) REFERENCES public.users (id) MATCH SIMPLE ON UPDATE CASCADE ON DELETE CASCADE; ALTER TABLE public.users_roles ADD CONSTRAINT users_roles_roles_fk FOREIGN KEY (role_id) REFERENCES public.roles (id) MATCH SIMPLE ON UPDATE CASCADE ON DELETE CASCADE; INSERT INTO roles (name) VALUES ('ROLE_USER'), ('ROLE_ADMIN');
Create Entity Classes:
User.kt
Note: the users and roles tables are in a many-to-many relationship - one user can have several roles (for example, an ordinary user and an administrator), and several users can be assigned one role.
Information for consideration: There is an approach where users are given separate powers (authorities), while a role implies a group of powers. Read more about the difference between roles and permissions here: Granted Authority Versus Role in Spring Security .
import javax.persistence.* @Entity @Table(name = "users") data class User ( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id: Long? = 0, @Column(name="username") var username: String?=null, @Column(name="first_name") var firstName: String?=null, @Column(name="last_name") var lastName: String?=null, @Column(name="email") var email: String?=null, @Column(name="password") var password: String?=null, @Column(name="enabled") var enabled: Boolean = false, @ManyToMany(fetch = FetchType.EAGER) @JoinTable( name = "users_roles", joinColumns = [JoinColumn(name = "user_id", referencedColumnName = "id")], inverseJoinColumns = [JoinColumn(name = "role_id", referencedColumnName = "id")] ) var roles: Collection<Role>? = null )
Note: the users and roles tables are in a many-to-many relationship - one user can have several roles (for example, an ordinary user and an administrator), and several users can be assigned one role.
Information for consideration: There is an approach where users are given separate powers (authorities), while a role implies a group of powers. Read more about the difference between roles and permissions here: Granted Authority Versus Role in Spring Security .
Role.kt
import javax.persistence.* @Entity @Table(name = "roles") data class Role ( @Id @GeneratedValue(strategy = GenerationType.AUTO) val id: Long, @Column(name="name") val name: String )
Create repositories for working with tables:
UsersRepository.kt
import java.util.Optional import com.kotlinspringvue.backend.jpa.User import org.springframework.data.repository.CrudRepository import org.springframework.data.repository.query.Param import org.springframework.data.jpa.repository.JpaRepository import javax.transaction.Transactional interface UserRepository: JpaRepository<User, Long> { fun existsByUsername(@Param("username") username: String): Boolean fun findByUsername(@Param("username") username: String): Optional<User> fun findByEmail(@Param("email") email: String): Optional<User> @Transactional fun deleteByUsername(@Param("username") username: String) }
RolesRepository.kt
import com.kotlinspringvue.backend.jpa.Role import org.springframework.data.repository.CrudRepository import org.springframework.data.repository.query.Param import org.springframework.data.jpa.repository.JpaRepository interface RoleRepository : JpaRepository<Role, Long> { fun findByName(@Param("name") name: String): Role }
Add new dependencies to
pom.xml backend module
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>com.fasterxml.jackson.module</groupId> <artifactId>jackson-module-kotlin</artifactId> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.0</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</artifactId> <version>0.10.6</version> </dependency>
And add new parameters for working with tokens in application.properties :
assm.app.jwtSecret=jwtAssmSecretKey assm.app.jwtExpiration=86400
Now we will create classes for storing data coming from authorization and registration forms:
LoginUser.kt
class LoginUser : Serializable { @JsonProperty("username") var username: String? = null @JsonProperty("password") var password: String? = null constructor() {} constructor(username: String, password: String) { this.username = username this.password = password } companion object { private const val serialVersionUID = -1764970284520387975L } }
NewUser.kt
import com.fasterxml.jackson.annotation.JsonProperty import java.io.Serializable class NewUser : Serializable { @JsonProperty("username") var username: String? = null @JsonProperty("firstName") var firstName: String? = null @JsonProperty("lastName") var lastName: String? = null @JsonProperty("email") var email: String? = null @JsonProperty("password") var password: String? = null constructor() {} constructor(username: String, firstName: String, lastName: String, email: String, password: String, recaptchaToken: String) { this.username = username this.firstName = firstName this.lastName = lastName this.email = email this.password = password } companion object { private const val serialVersionUID = -1764970284520387975L } }
Let's make special classes for server responses - returning authentication token and universal (string):
JwtRespons.kt
import org.springframework.security.core.GrantedAuthority class JwtResponse(var accessToken: String?, var username: String?, val authorities: Collection<GrantedAuthority>) { var type = "Bearer" }
ResponseMessage.kt
class ResponseMessage(var message: String?)
We will also need the “User Already Exists” exception.
UserAlreadyExistException.kt
class UserAlreadyExistException : RuntimeException { constructor() : super() {} constructor(message: String, cause: Throwable) : super(message, cause) {} constructor(message: String) : super(message) {} constructor(cause: Throwable) : super(cause) {} companion object { private val serialVersionUID = 5861310537366287163L } }
To define user roles, we need an additional service that implements the UserDetailsService interface:
UserDetailsServiceImpl.kt
import com.kotlinspringvue.backend.repository.UserRepository import org.springframework.beans.factory.annotation.Autowired import org.springframework.security.core.userdetails.UserDetails import org.springframework.security.core.userdetails.UserDetailsService import org.springframework.security.core.userdetails.UsernameNotFoundException import org.springframework.stereotype.Service import org.springframework.security.core.GrantedAuthority import org.springframework.security.core.authority.SimpleGrantedAuthority import java.util.stream.Collectors @Service class UserDetailsServiceImpl: UserDetailsService { @Autowired lateinit var userRepository: UserRepository @Throws(UsernameNotFoundException::class) override fun loadUserByUsername(username: String): UserDetails { val user = userRepository.findByUsername(username).get() ?: throw UsernameNotFoundException("User '$username' not found") val authorities: List<GrantedAuthority> = user.roles!!.stream().map({ role -> SimpleGrantedAuthority(role.name)}).collect(Collectors.toList<GrantedAuthority>()) return org.springframework.security.core.userdetails.User .withUsername(username) .password(user.password) .authorities(authorities) .accountExpired(false) .accountLocked(false) .credentialsExpired(false) .disabled(false) .build() } }
To work with JWT, we need three classes:
JwtAuthEntryPoint - for handling authorization errors and further use in web security settings:
JwtAuthEntryPoint.kt
import javax.servlet.ServletException import javax.servlet.http.HttpServletRequest import javax.servlet.http.HttpServletResponse import org.slf4j.Logger import org.slf4j.LoggerFactory import org.springframework.security.core.AuthenticationException import org.springframework.security.web.AuthenticationEntryPoint import org.springframework.stereotype.Component @Component class JwtAuthEntryPoint : AuthenticationEntryPoint { @Throws(IOException::class, ServletException::class) override fun commence(request: HttpServletRequest, response: HttpServletResponse, e: AuthenticationException) { logger.error("Unauthorized error. Message - {}", e!!.message) response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Invalid credentials") } companion object { private val logger = LoggerFactory.getLogger(JwtAuthEntryPoint::class.java) } }
JwtProvider - to generate and validate tokens, as well as determine the user by his token:
JwtProvider.kt
import io.jsonwebtoken.* import org.springframework.beans.factory.annotation.Autowired import org.slf4j.Logger import org.slf4j.LoggerFactory import org.springframework.beans.factory.annotation.Value import org.springframework.security.core.Authentication import org.springframework.stereotype.Component import org.springframework.security.core.GrantedAuthority import org.springframework.security.core.authority.SimpleGrantedAuthority import com.kotlinspringvue.backend.repository.UserRepository import java.util.Date @Component public class JwtProvider { private val logger: Logger = LoggerFactory.getLogger(JwtProvider::class.java) @Autowired lateinit var userRepository: UserRepository @Value("\${assm.app.jwtSecret}") lateinit var jwtSecret: String @Value("\${assm.app.jwtExpiration}") var jwtExpiration:Int?=0 fun generateJwtToken(username: String): String { return Jwts.builder() .setSubject(username) .setIssuedAt(Date()) .setExpiration(Date((Date()).getTime() + jwtExpiration!! * 1000)) .signWith(SignatureAlgorithm.HS512, jwtSecret) .compact() } fun validateJwtToken(authToken: String): Boolean { try { Jwts.parser().setSigningKey(jwtSecret).parseClaimsJws(authToken) return true } catch (e: SignatureException) { logger.error("Invalid JWT signature -> Message: {} ", e) } catch (e: MalformedJwtException) { logger.error("Invalid JWT token -> Message: {}", e) } catch (e: ExpiredJwtException) { logger.error("Expired JWT token -> Message: {}", e) } catch (e: UnsupportedJwtException) { logger.error("Unsupported JWT token -> Message: {}", e) } catch (e: IllegalArgumentException) { logger.error("JWT claims string is empty -> Message: {}", e) } return false } fun getUserNameFromJwtToken(token: String): String { return Jwts.parser() .setSigningKey(jwtSecret) .parseClaimsJws(token) .getBody().getSubject() } }
JwtAuthTokenFilter - to authenticate users and filter requests:
JwtAuthTokenFilter.kt
import java.io.IOException import javax.servlet.FilterChain import javax.servlet.ServletException import javax.servlet.http.HttpServletRequest import javax.servlet.http.HttpServletResponse import org.slf4j.LoggerFactory import org.springframework.beans.factory.annotation.Autowired import org.springframework.security.authentication.UsernamePasswordAuthenticationToken import org.springframework.security.core.context.SecurityContextHolder import org.springframework.security.core.userdetails.UserDetails import org.springframework.security.web.authentication.WebAuthenticationDetailsSource import org.springframework.web.filter.OncePerRequestFilter import com.kotlinspringvue.backend.service.UserDetailsServiceImpl class JwtAuthTokenFilter : OncePerRequestFilter() { @Autowired private val tokenProvider: JwtProvider? = null @Autowired private val userDetailsService: UserDetailsServiceImpl? = null @Throws(ServletException::class, IOException::class) override fun doFilterInternal(request: HttpServletRequest, response: HttpServletResponse, filterChain: FilterChain) { try { val jwt = getJwt(request) if (jwt != null && tokenProvider!!.validateJwtToken(jwt)) { val username = tokenProvider.getUserNameFromJwtToken(jwt) val userDetails = userDetailsService!!.loadUserByUsername(username) val authentication = UsernamePasswordAuthenticationToken( userDetails, null, userDetails.getAuthorities()) authentication.setDetails(WebAuthenticationDetailsSource().buildDetails(request)) SecurityContextHolder.getContext().setAuthentication(authentication) } } catch (e: Exception) { logger.error("Can NOT set user authentication -> Message: {}", e) } filterChain.doFilter(request, response) } private fun getJwt(request: HttpServletRequest): String? { val authHeader = request.getHeader("Authorization") return if (authHeader != null && authHeader.startsWith("Bearer ")) { authHeader.replace("Bearer ", "") } else null } companion object { private val logger = LoggerFactory.getLogger(JwtAuthTokenFilter::class.java) } }
Now we can configure the bean responsible for web security:
WebSecurityConfig.kt
import org.springframework.context.annotation.Bean import org.springframework.context.annotation.Configuration import org.springframework.beans.factory.annotation.Autowired import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter import org.springframework.security.config.http.SessionCreationPolicy import org.springframework.security.authentication.AuthenticationManager import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity import org.springframework.security.config.annotation.web.builders.HttpSecurity import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder import com.kotlinspringvue.backend.jwt.JwtAuthEntryPoint import com.kotlinspringvue.backend.jwt.JwtAuthTokenFilter import com.kotlinspringvue.backend.service.UserDetailsServiceImpl @Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) class WebSecurityConfig : WebSecurityConfigurerAdapter() { @Autowired internal var userDetailsService: UserDetailsServiceImpl? = null @Autowired private val unauthorizedHandler: JwtAuthEntryPoint? = null @Bean fun bCryptPasswordEncoder(): BCryptPasswordEncoder { return BCryptPasswordEncoder() } @Bean fun authenticationJwtTokenFilter(): JwtAuthTokenFilter { return JwtAuthTokenFilter() } @Throws(Exception::class) override fun configure(authenticationManagerBuilder: AuthenticationManagerBuilder) { authenticationManagerBuilder .userDetailsService(userDetailsService) .passwordEncoder(bCryptPasswordEncoder()) } @Bean @Throws(Exception::class) override fun authenticationManagerBean(): AuthenticationManager { return super.authenticationManagerBean() } @Throws(Exception::class) override protected fun configure(http: HttpSecurity) { http.csrf().disable().authorizeRequests() .antMatchers("/**").permitAll() .anyRequest().authenticated() .and() .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and() .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS) http.addFilterBefore(authenticationJwtTokenFilter(), UsernamePasswordAuthenticationFilter::class.java) } }
Create a controller for registration and authorization:
AuthController.kt
We have implemented two methods:
import javax.validation.Valid import java.util.* import java.util.stream.Collectors import org.springframework.security.core.Authentication import org.springframework.beans.factory.annotation.Autowired import org.springframework.http.HttpStatus import org.springframework.http.ResponseEntity import org.springframework.security.authentication.AuthenticationManager import org.springframework.security.authentication.UsernamePasswordAuthenticationToken import org.springframework.security.core.context.SecurityContextHolder import org.springframework.security.core.userdetails.UserDetails import org.springframework.security.crypto.password.PasswordEncoder import org.springframework.security.access.prepost.PreAuthorize import org.springframework.security.core.GrantedAuthority import org.springframework.security.core.authority.SimpleGrantedAuthority import org.springframework.web.bind.annotation.CrossOrigin import org.springframework.web.bind.annotation.PostMapping import org.springframework.web.bind.annotation.RequestBody import org.springframework.web.bind.annotation.RequestMapping import org.springframework.web.bind.annotation.RestController import com.kotlinspringvue.backend.model.LoginUser import com.kotlinspringvue.backend.model.NewUser import com.kotlinspringvue.backend.web.response.JwtResponse import com.kotlinspringvue.backend.web.response.ResponseMessage import com.kotlinspringvue.backend.jpa.User import com.kotlinspringvue.backend.repository.UserRepository import com.kotlinspringvue.backend.repository.RoleRepository import com.kotlinspringvue.backend.jwt.JwtProvider @CrossOrigin(origins = ["*"], maxAge = 3600) @RestController @RequestMapping("/api/auth") class AuthController() { @Autowired lateinit var authenticationManager: AuthenticationManager @Autowired lateinit var userRepository: UserRepository @Autowired lateinit var roleRepository: RoleRepository @Autowired lateinit var encoder: PasswordEncoder @Autowired lateinit var jwtProvider: JwtProvider @PostMapping("/signin") fun authenticateUser(@Valid @RequestBody loginRequest: LoginUser): ResponseEntity<*> { val userCandidate: Optional <User> = userRepository.findByUsername(loginRequest.username!!) if (userCandidate.isPresent) { val user: User = userCandidate.get() val authentication = authenticationManager.authenticate( UsernamePasswordAuthenticationToken(loginRequest.username, loginRequest.password)) SecurityContextHolder.getContext().setAuthentication(authentication) val jwt: String = jwtProvider.generateJwtToken(user.username!!) val authorities: List<GrantedAuthority> = user.roles!!.stream().map({ role -> SimpleGrantedAuthority(role.name)}).collect(Collectors.toList<GrantedAuthority>()) return ResponseEntity.ok(JwtResponse(jwt, user.username, authorities)) } else { return ResponseEntity(ResponseMessage("User not found!"), HttpStatus.BAD_REQUEST) } } @PostMapping("/signup") fun registerUser(@Valid @RequestBody newUser: NewUser): ResponseEntity<*> { val userCandidate: Optional <User> = userRepository.findByUsername(newUser.username!!) if (!userCandidate.isPresent) { if (usernameExists(newUser.username!!)) { return ResponseEntity(ResponseMessage("Username is already taken!"), HttpStatus.BAD_REQUEST) } else if (emailExists(newUser.email!!)) { return ResponseEntity(ResponseMessage("Email is already in use!"), HttpStatus.BAD_REQUEST) } // Creating user's account val user = User( 0, newUser.username!!, newUser.firstName!!, newUser.lastName!!, newUser.email!!, encoder.encode(newUser.password), true ) user!!.roles = Arrays.asList(roleRepository.findByName("ROLE_USER")) userRepository.save(user) return ResponseEntity(ResponseMessage("User registered successfully!"), HttpStatus.OK) } else { return ResponseEntity(ResponseMessage("User already exists!"), HttpStatus.BAD_REQUEST) } } private fun emailExists(email: String): Boolean { return userRepository.findByUsername(email).isPresent } private fun usernameExists(username: String): Boolean { return userRepository.findByUsername(username).isPresent } }
We have implemented two methods:
- signin - checks if the user exists and, if so, returns the generated token, username and its roles (or rather, authorities - permissions)
- signup - checks if the user exists and, if not, creates a new record in the users table with an external link to the role ROLE_USER
Finally, we supplement the BackendController with two methods: one will return data that is accessible only to the administrator (a user with ROLE_USER and ROLE_ADMIN privileges) and to an ordinary user (ROLE_USER).
BackendController.kt
import org.springframework.security.access.prepost.PreAuthorize import org.springframework.security.core.Authentication import com.kotlinspringvue.backend.repository.UserRepository import com.kotlinspringvue.backend.jpa.User … @Autowired lateinit var userRepository: UserRepository … @GetMapping("/usercontent") @PreAuthorize("hasRole('USER') or hasRole('ADMIN')") @ResponseBody fun getUserContent(authentication: Authentication): String { val user: User = userRepository.findByUsername(authentication.name).get() return "Hello " + user.firstName + " " + user.lastName + "!" } @GetMapping("/admincontent") @PreAuthorize("hasRole('ADMIN')") @ResponseBody fun getAdminContent(): String { return "Admin's content" }
Frontend
Let's create some new components:
- Home
- Signin
- Signup
- Adminpage
- Userpage
With template content (for a
Component Template
<template> <div> </div> </template> <script> </script> <style> </style>
Add id = “ component_name ” to each div inside the template and export default {name: '[component_name]'} in the script .
Now add new routes:
router.js
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import SignIn from '@/components/SignIn' import SignUp from '@/components/SignUp' import AdminPage from '@/components/AdminPage' import UserPage from '@/components/UserPage' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/home', name: 'Home', component: Home }, { path: '/login', name: 'SignIn', component: SignIn }, { path: '/register', name: 'SignUp', component: SignUp }, { path: '/user', name: 'UserPage', component: UserPage }, { path: '/admin', name: 'AdminPage', component: AdminPage } ] })
We will use Vuex to store tokens and use them when querying the server . Vuex is a state management pattern + Vue.js. library It serves as a centralized data warehouse for all application components with rules to ensure that the state can only be changed in a predictable way.
$ npm install --save vuex
Add store as a separate file to src / store :
index.js
Let's see what we have here:
: (mutations) — .
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { token: localStorage.getItem('user-token') || '', role: localStorage.getItem('user-role') || '', username: localStorage.getItem('user-name') || '', authorities: localStorage.getItem('authorities') || '', }; const getters = { isAuthenticated: state => { if (state.token != null && state.token != '') { return true; } else { return false; } }, isAdmin: state => { if (state.role === 'admin') { return true; } else { return false; } }, getUsername: state => { return state.username; }, getAuthorities: state => { return state.authorities; }, getToken: state => { return state.token; } }; const mutations = { auth_login: (state, user) => { localStorage.setItem('user-token', user.token); localStorage.setItem('user-name', user.name); localStorage.setItem('user-authorities', user.roles); state.token = user.token; state.username = user.username; state.authorities = user.roles; var isUser = false; var isAdmin = false; for (var i = 0; i < user.roles.length; i++) { if (user.roles[i].authority === 'ROLE_USER') { isUser = true; } else if (user.roles[i].authority === 'ROLE_ADMIN') { isAdmin = true; } } if (isUser) { localStorage.setItem('user-role', 'user'); state.role = 'user'; } if (isAdmin) { localStorage.setItem('user-role', 'admin'); state.role = 'admin'; } }, auth_logout: () => { state.token = ''; state.role = ''; state.username = ''; state.authorities = []; localStorage.removeItem('user-token'); localStorage.removeItem('user-role'); localStorage.removeItem('user-name'); localStorage.removeItem('user-authorities'); } }; const actions = { login: (context, user) => { context.commit('auth_login', user) }, logout: (context) => { context.commit('auth_logout'); } }; export const store = new Vuex.Store({ state, getters, mutations, actions });
Let's see what we have here:
- store — , — , , ( — (authorities): — , , admin user —
- getters —
- mutations —
- actions — ,
: (mutations) — .
We will make the appropriate changes to
main.js
import { store } from './store'; ... new Vue({ router, store, render: h => h(App) }).$mount('#app')
In order for the interface to immediately look beautiful and neat even in an experimental application I use. But this, as they say, is a matter of taste, and does not affect the basic functionality:
$ npm install --save bootstrap bootstrap-vue
Bootstrap in main.js
import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' … Vue.use(BootstrapVue)
Now let's work on the App component:
- Add the ability to "log out" for all authorized users
- Add automatic redirection to the home page after logout
- We will show the navigation menu buttons “User” and “Logout” for all authorized users and “Login” for unauthorized
- We will show the “Admin” button of the navigation menu only to authorized administrators
For this:
add logout () method
methods: { logout() { this.$store.dispatch('logout'); this.$router.push('/') } }
and edit the template
Note:
<template> <div id="app"> <b-navbar style="width: 100%" type="dark" variant="dark"> <b-navbar-brand id="nav-brand" href="#">Kotlin+Spring+Vue</b-navbar-brand> <router-link to="/"><img height="30px" src="./assets/img/kotlin-logo.png" alt="Kotlin+Spring+Vue"/></router-link> <router-link to="/"><img height="30px" src="./assets/img/spring-boot-logo.png" alt="Kotlin+Spring+Vue"/></router-link> <router-link to="/"><img height="30px" src="./assets/img/vuejs-logo.png" alt="Kotlin+Spring+Vue"/></router-link> <router-link to="/user" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated">User</router-link> <router-link to="/admin" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated && this.$store.getters.isAdmin">Admin</router-link> <router-link to="/register" class="nav-link text-light" v-if="!this.$store.getters.isAuthenticated">Register</router-link> <router-link to="/login" class="nav-link text-light" v-if="!this.$store.getters.isAuthenticated">Login</router-link> <a href="#" class="nav-link text-light" v-if="this.$store.getters.isAuthenticated" v-on:click="logout">Logout </a> </b-navbar> <router-view></router-view> </div> </template>
Note:
- store , . , , («v-if»)
- Kotlin, Spring Boot Vue.js, /assets/img/ . , ( )
Update components:
Home.vue
<template> <div div="home"> <b-jumbotron> <template slot="header">Kotlin + Spring Boot + Vue.js</template> <template slot="lead"> This is the demo web-application written in Kotlin using Spring Boot and Vue.js for frontend </template> <hr class="my-4" /> <p v-if="!this.$store.getters.isAuthenticated"> Login and start </p> <router-link to="/login" v-if="!this.$store.getters.isAuthenticated"> <b-button variant="primary">Login</b-button> </router-link> </b-jumbotron> </div> </template> <script> </script> <style> </style>
SignIn.vue
:
<template> <div div="signin"> <div class="login-form"> <b-card title="Login" tag="article" style="max-width: 20rem;" class="mb-2" > <div> <b-alert :show="dismissCountDown" dismissible variant="danger" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged" > {{ alertMessage }} </b-alert> </div> <div> <b-form-input type="text" placeholder="Username" v-model="username" /> <div class="mt-2"></div> <b-form-input type="password" placeholder="Password" v-model="password" /> <div class="mt-2"></div> </div> <b-button v-on:click="login" variant="primary">Login</b-button> <hr class="my-4" /> <b-button variant="link">Forget password?</b-button> </b-card> </div> </div> </template> <script> import {AXIOS} from './http-common' export default { name: 'SignIn', data() { return { username: '', password: '', dismissSecs: 5, dismissCountDown: 0, alertMessage: 'Request error', } }, methods: { login() { AXIOS.post(`/auth/signin`, {'username': this.$data.username, 'password': this.$data.password}) .then(response => { this.$store.dispatch('login', {'token': response.data.accessToken, 'roles': response.data.authorities, 'username': response.data.username}); this.$router.push('/home') }, error => { this.$data.alertMessage = (error.response.data.message.length < 150) ? error.response.data.message : 'Request error. Please, report this error website owners'; console.log(error) }) .catch(e => { console.log(e); this.showAlert(); }) }, countDownChanged(dismissCountDown) { this.dismissCountDown = dismissCountDown }, showAlert() { this.dismissCountDown = this.dismissSecs }, } } </script> <style> .login-form { margin-left: 38%; margin-top: 50px; } </style>
:
- POST-
- storage
- «» Bootstrap
- , /home
SignUp.vue
:
<template> <div div="signup"> <div class="login-form"> <b-card title="Register" tag="article" style="max-width: 20rem;" class="mb-2" > <div> <b-alert :show="dismissCountDown" dismissible variant="danger" @dismissed="dismissCountDown=0" @dismiss-count-down="countDownChanged" > {{ alertMessage }} </b-alert> </div> <div> <b-alert variant="success" :show="successfullyRegistered"> You have been successfully registered! Now you can login with your credentials <hr /> <router-link to="/login"> <b-button variant="primary">Login</b-button> </router-link> </b-alert> </div> <div> <b-form-input type="text" placeholder="Username" v-model="username" /> <div class="mt-2"></div> <b-form-input type="text" placeholder="First Name" v-model="firstname" /> <div class="mt-2"></div> <b-form-input type="text" placeholder="Last name" v-model="lastname" /> <div class="mt-2"></div> <b-form-input type="text" placeholder="Email" v-model="email" /> <div class="mt-2"></div> <b-form-input type="password" placeholder="Password" v-model="password" /> <div class="mt-2"></div> <b-form-input type="password" placeholder="Confirm Password" v-model="confirmpassword" /> <div class="mt-2"></div> </div> <b-button v-on:click="register" variant="primary">Register</b-button> </b-card> </div> </div> </template> <script> import {AXIOS} from './http-common' export default { name: 'SignUp', data () { return { username: '', firstname: '', lastname: '', email: '', password: '', confirmpassword: '', dismissSecs: 5, dismissCountDown: 0, alertMessage: '', successfullyRegistered: false } }, methods: { register: function () { if (this.$data.username === '' || this.$data.username == null) { this.$data.alertMessage = 'Please, fill "Username" field'; this.showAlert(); } else if (this.$data.firstname === '' || this.$data.firstname == null) { this.$data.alertMessage = 'Please, fill "First name" field'; this.showAlert(); } else if (this.$data.lastname === '' || this.$data.lastname == null) { this.$data.alertMessage = 'Please, fill "Last name" field'; this.showAlert(); } else if (this.$data.email === '' || this.$data.email == null) { this.$data.alertMessage = 'Please, fill "Email" field'; this.showAlert(); } else if (!this.$data.email.includes('@')) { this.$data.alertMessage = 'Email is incorrect'; this.showAlert(); } else if (this.$data.password === '' || this.$data.password == null) { this.$data.alertMessage = 'Please, fill "Password" field'; this.showAlert(); } else if (this.$data.confirmpassword === '' || this.$data.confirmpassword == null) { this.$data.alertMessage = 'Please, confirm password'; this.showAlert(); } else if (this.$data.confirmpassword !== this.$data.password) { this.$data.alertMessage = 'Passwords are not match'; this.showAlert(); } else { var newUser = { 'username': this.$data.username, 'firstName': this.$data.firstname, 'lastName': this.$data.lastname, 'email': this.$data.email, 'password': this.$data.password }; AXIOS.post('/auth/signup', newUser) .then(response => { console.log(response); this.successAlert(); }, error => { this.$data.alertMessage = (error.response.data.message.length < 150) ? error.response.data.message : 'Request error. Please, report this error website owners' this.showAlert(); }) .catch(error => { console.log(error); this.$data.alertMessage = 'Request error. Please, report this error website owners'; this.showAlert(); }); } }, countDownChanged(dismissCountDown) { this.dismissCountDown = dismissCountDown }, showAlert() { this.dismissCountDown = this.dismissSecs }, successAlert() { this.username = ''; this.firstname = ''; this.lastname = ''; this.email = ''; this.password = ''; this.confirmpassword = ''; this.successfullyRegistered = true; } } } </script> <style> .login-form { margin-left: 38%; margin-top: 50px; } </style>
:
- POST-
- Bootstrap
- , Bootstrap-
UserPage.vue
:
<template> <div div="userpage"> <h2>{{ pageContent }}</h2> </div> </template> <script> import {AXIOS} from './http-common' export default { name: 'UserPage', data() { return { pageContent: '' } }, methods: { loadUserContent() { const header = {'Authorization': 'Bearer ' + this.$store.getters.getToken}; AXIOS.get('/usercontent', { headers: header }) .then(response => { this.$data.pageContent = response.data; }) .catch(error => { console.log('ERROR: ' + error.response.data); }) } }, mounted() { this.loadUserContent(); } } </script> <style> </style>
:
- , storage
Admin.vue
, UserPage .
<template> <div div="adminpage"> <h2>{{ pageContent }}</h2> </div> </template> <script> import {AXIOS} from './http-common' export default { name: 'AdminPage', data() { return { pageContent: '' } }, methods: { loadUserContent() { const header = {'Authorization': 'Bearer ' + this.$store.getters.getToken}; AXIOS.get('/admincontent', { headers: header }) .then(response => { this.$data.pageContent = response.data; }) .catch(error => { console.log('ERROR: ' + error.response.data); }) } }, mounted() { this.loadUserContent(); } } </script> <style> </style>
, UserPage .
Application launch
We will register our first administrator:
Important: by default, all new users are regular users. Let's give the first administrator his authority:
INSERT INTO users_roles (user_id, role_id) VALUES (1, 2);
Then:
- Let's log in as an administrator
- Check the User page:
- Check the admin page:
- Log out of the administrator account
- Register an ordinary user account
- Check the availability of the User page
- Let's try to get admin data using the REST API: http: // localhost: 8080 / api / admincontent
ERROR 77100 --- [nio-8080-exec-2] ckbackend.jwt.JwtAuthEntryPoint : Unauthorized error. Message - Full authentication is required to access this resource
Ways to improve
Generally speaking, there are always a lot of them in any business. I will list the most obvious:
- Use to build Gradle (if you consider this an improvement)
- Immediately cover the code with unit tests (this is, no doubt, good practice)
- From the very beginning, build CI / CD Pipeline: place the code in the repository, contain the application, automate the assembly and deployment
- Add PUT and DELETE requests (for example, updating user data and deleting accounts)
- Implement activation / deactivation of student records
- Do not use local storage to store token - it is not safe
- Use OAuth
- Verify email addresses when registering a new user
- , , reCAPTCHA
useful links
- , , Heroku, reCAPTCHA . ,
- GitHub
- —
- Vue.js, Spring Boot, Kotlin, and GraphQL: Building Modern Apps
- Baeldung — Java, Spring and Web Development tutorials
- Vue.js Frontend with a Spring Boot Backend
- Creating a RESTful Web Service with Spring Boot (Kotlin)
- Data Classes (Kotlin)
- Data Classes in Kotlin
- JWT authentication: When and how to use it
- What is Vuex?
- Managing state in Vue.js with Vuex
All Articles