VoK 整合式登入 - day10

登入功能不外乎输入帐密、验证、赋予角色功能权限。Vaadin-on-Kotlin 提供了 VoK-Security API 用以达成上述功能，本文将使用VoK整合式登入画面。

package com.example.vok

import com.vaadin.flow.component.UI
import eu.vaadinonkotlin.vaadin10.Session
import java.io.Serializable

class LoginServices: Serializable {
    var currentUser: User? = null
        private set
    val isLoggedIn get() = currentUser != null

    fun login(username: String, password: String): Boolean{
        // TODO verify username and password
        currentUser = User(username)
        UI.getCurrent().page.reload()
        return true
    }

    fun logout(){
        Session.current.close()
        UI.getCurrent().navigate("")
        UI.getCurrent().page.reload()
    }
}

val Session.loginService: LoginServices
    get() = getOrPut { LoginServices() }

data class User(val name: String) : Serializable

currentUser 可供读取，但不提供其他程序赋值。
本范例并未实际检查使用者帐号密码是否正确，当login()被呼叫直接设定该user为登入状态，并更新画面。
logout()被呼叫时，清除Session、导至首页後更新画面。

val Session.loginService: LoginServices
    get() = getOrPut { LoginServices() }

亦即当 Session.loginService 被读取时，若已存在就直接取用，若不存在就新增一个 LoginSerivces()

登入画面, 开启新档 LoginView.kt

package com.example.vok

import com.github.mvysny.karibudsl.v10.*
import com.vaadin.flow.component.login.LoginForm
import com.vaadin.flow.component.login.LoginI18n
import com.vaadin.flow.router.BeforeEnterEvent
import com.vaadin.flow.router.BeforeEnterObserver
import com.vaadin.flow.router.Route
import eu.vaadinonkotlin.vaadin10.Session

@Route("login")
class LoginView: KComposite(), BeforeEnterObserver {
    private lateinit var loginForm: LoginForm

    private val root = ui{
        verticalLayout {
            setSizeFull(); isPadding = false; content { center() }
            val loginI18n: LoginI18n = loginI18n {
                header.title = "您好!"
                additionalInformation = "请登入"
            }
            loginForm = loginForm(loginI18n){
                addLoginListener {event ->
                    isError = !Session.loginService.login(event.username, event.password)
                }
            }
        }
    }

    override fun beforeEnter(event: BeforeEnterEvent) {
        if (Session.loginService.isLoggedIn){
            event.rerouteTo("")
        }
    }

}

LoginForm 是 Vaadin 提供的 UI Component，LoginI18n 则是提供LoginForm需要的资料，使用编码为 UTF8。

在开启页面前检查登入状态，请打开MainLayout.kt

@Viewport(Viewport.DEVICE_DIMENSIONS)
class MainLayout: KComposite(), RouterLayout, BeforeEnterObserver {
    private val root = ui {
        div {
            setSizeFull()
        }
    }
}

  override fun beforeEnter(event: BeforeEnterEvent) {
    if (event.navigationTarget != LoginView::class.java && !Session.loginService.isLoggedIn) {
      event.rerouteTo(LoginView::class.java)
    }
  }

@Viewport 即 html 的 <meta name=”viewport”> 为了符合不同尺寸装置最佳浏览
在 MainLayout.kt 加上检查，只要上层layout为 MainLayout，在进入该页面前，皆会执行检查登入状态。

执行结果

自订文字

登入提示文字可修改为中文或任意文字

            val loginI18n: LoginI18n = loginI18n {
                header.title = "您好!"
                with(form){
                    title = "登入"
                    username = "帐号"
                    password = "密码"
                    submit = "登入"
                    forgotPassword = "忘记密码"
                }
                additionalInformation = "请登入"

            }

改为中文後，执行结果如下