ក្រោយពីបានត្រួតពិនិត្យអ្នកចុះឈ្មោះចូលទំព័រគ្រប់គ្រងនិងបានរក្សាទុកនូវទិន្នន័យរបស់អ្នកចុះឈ្មោះរួចហើយ នៅពេលក្រោយៗមកទៀត យើងអាចធ្វើការផ្ទៀងផ្ទាត់មើលថាតើអ្នកចុះឈ្មោះណាមួយដែលត្រូវបានត្រួតពិនិត្យរួចហើយ។ បើត្រូវបានត្រួតពិនិត្យរួចហើយ យើងអាចបញ្ជូនអ្នកនោះទៅកាន់ទំព័រគ្រប់គ្រងតែម្តង ដោយពុំចាំបាច់ត្រូវចុះឈ្មោះនៅលើទំព័រចូលក្នុងទៀតឡើយ។
យើងអាចប្រើប្រាស់ក្បួនកណ្តាលឬ middleware សំរាប់ការផ្ទៀងផ្ទាត់នេះ ដោយសាកល្បងស្រង់យកកូដអាថ៌កំបាំងរបស់អ្នកចុះឈ្មោះពីក្នុង browser ។ បើសិនជាមានកូដអាថ៌កំបាំងនោះមែន យើងនឹងប្រើប្រាស់ពាក្យសំងាត់រួមជាមួយនឹងក្បួនខ្នាត verify( ) នៅក្នុងកញ្ចប់ JWT ដើម្បីបំបែកកូដអាថ៌កំបាំងនោះជាទិន្នន័យរបស់អ្នកចុះឈ្មោះ។ បើលទ្ធផលបានមកជាទិន្នន័យរបស់អ្នកចុះឈ្មោះមែន បានន័យថាអ្នកចុះឈ្មោះនោះត្រូវបានត្រួតពិនិត្យរួចហើយ យើងអាចបញ្ជូនគេទៅកាន់ទំព័រគ្រប់គ្រងតែម្តង ដោយមិនចាំបាច់ធ្វើការចុះឈ្មោះទៀតឡើយ។
ក្បួនកណ្តាលឬ middleware គ្រាន់ជាកន្លែងសំរាប់បំបែកកូដអាថ៌កំបាំងជាទិន្នន័យអ្នកចុះឈ្មោះ ចំណែកការផ្ទៀងផ្ទាត់មើលថាតើអ្នកចុះឈ្មោះណាមួយមានទិន្នន័យនៅក្នុង browser ឬអត់ និងត្រូវបញ្ជូនទៅទំព័រគ្រប់គ្រងឬអត់ គឺត្រូវធ្វើឡើងនៅក្នុងទំព័រចូលក្នុងដែលជាឯកសារ login.astro ។
// src/middleware.js
import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
import jwt from "jsonwebtoken"
export function onRequest ({ locals, request, cookies }, next) {
locals.prisma = prisma
const token = cookies.get('access_token')
if(!token){
return next()
}
try{
const userAuth = jwt.verify(token.value, import.meta.env.SECRET_KEY)
if(userAuth.userRole === "Admin"){
locals.userAdmin = userAuth.userRole
}
locals.userAuth = userAuth
}catch(err){
console.log(err.message)
}
return next()
}
<!--src/pages/login.astro-->
---
const result = ""
const { userAuth } = Astro.locals
if(userAuth){
return Astro.redirect('/admin')
}
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>ទំព័រចូលក្នុង</title>
<link rel="icon" href="/images/siteLogo.png" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script is:inline src="/scripts/jquery.js"></script>
</head>
<body class="text-sm leading-normal bg-gray-300">
<section class="w-[300px] mx-auto mt-20 bg-white">
<div class="text-center bg-teal-600 text-white font-display text-base py-1">
ចុះឈ្មោះចូលទំព័រគ្រប់គ្រង
</div>
<form id="login" class="p-5" action="/api/login" method="post">
<input class="w-full border px-2 py-1 mb-2" value="guest@khmerweb.app"
type="email" name="email" required placeholder="Email"/>
<input class="w-full border px-2 py-1 mb-2" value="password"
type="password" name="password" required placeholder="ពាក្យសំងាត់"/>
<input class="w-full bg-gray-300 px-2 py-1"
type="submit" value="បញ្ជូន"/>
<div id="info" class="text-center pt-1">{result}</div>
</form>
</section>
<script>
$('#login').on( "submit", function(event){
event.preventDefault()
const email = $('#login input[name="email"]').val()
const password = $('#login input[name="password"]').val()
const response = fetch('/api/login', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({password, email}),
redirect: 'follow'
}).then(response => {
if(response.redirected){
window.location.replace(response.url)
return
}
return response.json()
}).then(response => $('#login #info').html(response))
})
</script>
</body>
</html>
