昨天已經完成了50 % 左右的登次系統，

今天我們來把功能做得更完善～

• 還記得我們昨天在做登入 login.ejs 頁面的時候，是不是有打一個 POST /login 的方法，將帳號和密碼資料傳給 /login，
• 我們目前可以先不用連接資料庫，先將驗證的資料寫死一個帳號和密碼，可以參考以下程式。

    // routes/modules/login.js

    // 處理 POST 請求，驗證登入
    router.post('/', (req, res) => {
      const { username, password } = req.body // 從 POST 請求中獲取用戶名和密碼

      // 在這裡您可以實現用戶驗證邏輯，例如檢查用戶名和密碼是否有效
        // 先寫死帳號密碼做測試

      if (username === 'abby' && password === 'abby') {

        // 登入成功
        req.session.user = username // 在會話中存儲用戶信息
        res.redirect('/') // 登入成功後重定向到主頁或其他頁面
      } else {

        // 登入失敗
        res.render('login', { error: 'Invalid username or password' }) // 顯示錯誤信息
      }
    })

• 現在，我們可以正式來測試一下了！

  我們在瀏覽器打上 http://localhost:3000，因為我們還沒有登入過，所以應該在按 Enter 的時候，會被導轉到 login 頁。

  • 在瀏覽器打上 http://localhost:3000。

    

  • 按 Enter 後因為 middleware 會先判斷是否有登入狀態，因為沒有登入過所以被導轉。

    

• 打上我們剛剛寫死的帳號密碼 。
  → 以我為例就是帳號密碼都是 abby 。

  

• 可以順利的登入我們的首頁了～

• 因為我們設定的 session 已經有記住我們的登入狀態，所以我們可以在瀏覽器重整，
  都不會再導去登入頁。

  

• 現在確認了我們的頁面沒問題後，可以再加入記錄使用者資訊的資料庫。

• 創建名為 user 的資料庫。

      CREATE TABLE `user` (
        `id` int NOT NULL AUTO_INCREMENT,
        `username` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '',
        `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL DEFAULT '',
        `createdAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
        `updatedAt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
        PRIMARY KEY (`id`)
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci
  

• 在我們的註冊和登入頁面，加上與使用者資料與資料庫使用者比對的相關程式。

  // routes/modules/login.js
  
  router.post('/', async (req, res) => {
    const { username, password } = req.body // 從 POST 請求中獲取用戶名和密碼
    let userData
    try{
  		// 查詢是否已有註冊過
      userData = await user.findOne({
        where: {
          username: username,
        }
      ,raw: true})
    }catch(error){
      console.error("An error occurred:", error)
    }
  
  	// 如果沒註冊過，拋出錯誤
    if(!userData){
      res.render('login', { 'error': 'Account not found' }) 
    } 
  
  	// 如果有註冊過，但帳號密碼比對有誤，拋出錯誤
    if (username !== userData.username && password !== userData.password){
      res.render('login', { 'error': 'Invalid username or password.' }) 
    }
  
    if (username === userData.username && password === userData.password) {
      // 登入成功
      req.session.userId = userData.id
      req.session.user = userData.username 
      res.redirect('/') // 登入成功後重定向到主頁或其他頁面
    } else {
      // 登入失敗
      res.render('login', { 'error': 'Invalid username or password' }) // 顯示錯誤信息
    }
  })
  

      // routes/modules/signIn.js
  
      router.post('/', async(req, res) => {
        const { username, password } = req.body // 從 POST 請求中獲取用戶名和密碼
        let userData
        try {
              // 查詢是否已有註冊過
          userData = await user.findOne({
            where: {
              username: username,
            }
          ,raw: true})
  
        }catch(error){
          console.error("An error occurred:", error)
        }
  
          // 如果有註冊過，拋出錯誤
        if(userData) res.render('signIn', { 'error': 'This account is already registered.' }) 
  
          // 如果沒有註冊過，新增新使用者資料
        await user.create({ username: username, password, password }, { raw: true })
  
        res.render('signIn', { 'error': 'Registration successful. Please go to the login page to log in again.' }) 
      })
  

• 以上就完成了哦！可以完整試一次流程，並檢查是否可以寫入使用者資料。

  

以上其實功能已經完成了，但查看資料庫都可以看到使用者帳號密碼，
不是很奇怪嗎？這樣誰敢存資料在我們的網站ＸＤ
所以們需要增加我們資料的安全，這部分我們明天再說啦～