Веб-приложение на Kotlin + Spring Boot + Vue.js

• 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

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

Обращаю внимание:

• Название главного класса заканчивается на Kt
• Выполняется копирование ресурсов из корневая_папка_проекта/frontend/target/dist в src/main/resources/public
• Родительский проект (parent) в лице spring-boot-starter-parent пренесён на уровень главного pom.xml

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

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

где мы видим два наших модуля — frontend и backend, а также parent — spring-boot-starter-parent.

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

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

<template>
     <div id="app">
           <router-view></router-view>
     </div>
</template>

<script>
export default {
     name: 'app'
}
</script>

<style>
</style>

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

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

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
)

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

Примечание: Мы будем пользоваться методом findAll(), который нет необходимости переопределять, поэтому оставим тело пустым.

import com.kotlinspringvue.backend.repository.PersonRepository
import org.springframework.beans.factory.annotation.Autowired

… 

@Autowired
lateinit var personRepository: PersonRepository

… 

@GetMapping("/persons")
fun getPersons() = personRepository.findAll() 

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');

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
)

Примечание: таблицы users и roles находятся в отношении «многие-ко-многим» — у одного пользователя может быть несколько ролей (например, рядовой пользователь и администратор), и одной ролью могут быть наделены несколько пользователей.

Информация к размышлению: Существует подход, когда пользователей наделяют отдельными полномочиями (authorities), в то время как роль подразумевает группы полномочий. Подробнее о разнице между ролями и полномочиями можно прочитать здесь: Granted Authority Versus Role in Spring Security.

import javax.persistence.*

@Entity
@Table(name = "roles")
data class Role (

       @Id
       @GeneratedValue(strategy = GenerationType.AUTO)
       val id: Long,

       @Column(name="name")
       val name: String

)

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)

}

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
}

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

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

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

import org.springframework.security.core.GrantedAuthority

class JwtResponse(var accessToken: String?, var username: String?, val authorities:
     Collection<GrantedAuthority>) {
     var type = "Bearer"
}

class ResponseMessage(var message: String?)

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

     }
} 

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

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

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

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

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

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
   }

}

Мы реализовали два метода:

• signin — проверяет, существует ли пользователь и, если да, то возвращает сгенерированный токен, имя пользователя и его роли (вернее, authorities — полномочия)
• signup — проверяет, существует ли пользователь и, если нет, создаёт новую запись в таблице users с внешней ссылкой на роль ROLE_USER

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

<template>
     <div>
     </div>
</template>

<script>
</script>

<style>
</style>

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

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

Посмотрим, что у нас тут есть:

• store — собственно, данные для передачи между компонентами — имя пользователя, токен, полномочия и роль (в данном контексте роль — обещающая сущность для полномочий (authorities): посколько полномочия простого пользователя — это подмножество полномочий администратора, то мы можем просто сказать, что пользователь с полномочиями admin и user — администратор
• getters — функции для определения особых аспектов состояния
• mutations — функции для изменения состояния
• actions — функции для фиксации мутаций, они могут содержать асинхронные операции

Важно: использование мутаций (mutations) — это единственный правильный способ изменения состояния.

import { store } from './store';

...

new Vue({
     router,
     store,
     render: h => h(App)
}).$mount('#app')

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

… 

Vue.use(BootstrapVue) 

methods: {
     logout() {
          this.$store.dispatch('logout');
          this.$router.push('/')
     }
}

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

Примечание:

• Через store мы получаем информацию о полномочиях пользователя и о том, авторизован ли он. В зависимости от этого принимаем решение, какие кнопки показывать, а какие скрывать («v-if»)
• В панель навигации я добавил логотипы Kotlin, Spring Boot и Vue.js, лежащие в /assets/img/. Их можно либо убрать совсем, либо взять из репозитория моего приложения (ссылка есть в конце статьи)

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

<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

<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-овское сообщение с предложением авторизоваться
• Перед отправкой запроса происходит валидация полей

<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
• Полученные данные мы отрисовываем на странице

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