登入登出檢核

之前已經針對登入登出進行控管，非登入無法進入會員頁，按照此網站的需求，訂單建置、訂單查詢及會員專頁，因涉汲帳戶以及個資，若直接主頁之下的頁面(HOME\user)也應該是判斷是否登入，並直接跳回首頁或提醒。

1. 於上述頁面加入會員驗證，meta: { requiresAuth: true }，預設為true，以此判斷此頁是否需要進行會員驗證。

• 會員專頁

path: "/user",
name: "user",
component: User,
meta: { requiresAuth: true }, // 登入前須經過驗證

• 繳款紀錄查詢專頁

path: "/about",
name: "about",
component: () =>
import("./components/About.vue"),
meta: { requiresAuth: true }

• 建立繳款訂單頁面

path: "/products",
name: "products",
component: () =>
import("./components/Products.vue"),
meta: { requiresAuth: true }
},

2. export default router前加上
   之前參照的頁面是使用firebase建置的api為主，而目前這個網站的規劃是認session，所以調整了一部分內容。

//需經過驗證才可登入
router.beforeEach((to, from, next) => {
  console.log('to', to);
  console.log('from', from);
  console.log('next', next);
 
  const requiresAuth = to.matched.some(x => x.meta.requiresAuth)
  const currentUser = sessionStorage.getItem('user-info');

  console.log(requiresAuth)
  console.log(currentUser)

// 未經過驗證則到首頁
  if (requiresAuth && !currentUser) {
    console.log('未經過登入驗證');
    next('/')
} else if (requiresAuth && currentUser) {
    next()
} else {
    next()
}
})

驗證

1. 原始功能，點選頁面時會警告還沒登入
   
2. 登入後正常進入頁面，以建立訂單為例
   點選LOGOUT，畫面即跳入首頁。
   
   會先顯示後跳入首頁
   
   跳回首頁
   

3.直接連線行不行
目前設計是能排除這個問題，像是會員中心頁面，複製以下頁面，在未登入的情況下會將頁面重新導至首頁
( http://127.0.0.1:8083/user )

這樣一個簡單的應用網站就完成了，本來想要再調整些東西，但原來今天是最後一天，中間有一個天數寫錯了，本來想要在明天好好再最後一天補上心得。看看明天來補充心得囉~~
不管如何開心就是開心啦

最後心得

說來也真是神奇，莫名其妙的參賽，莫名其妙的中斷，只怪我沒檢查，不過最後還是順利的完成30天的鐵人!
總結一下最後完成的事項吧

• 內容簡介
  鐵人初體驗，藉由這次鐵人賽，嘗試以社區管委會的角色(今年擔任委員)為出發點，將近期學習的語言建置一套串接永豐金流API的網站，利用Vue.js 及 python FastAPI 前後端結合串接永豐金融API，建構出一個簡單社區費用收繳及相關服務網站。
• 運用技術

  • 前端
    以Vue.js為框架，改寫購物網站demo，建構出登入、繳費、即時查詢紀錄的社區服務網站。

  • 後端
    利用python的FASTAPI套件，建構加密、建置訂單以及查詢紀錄之對應API。

  • 資料庫
    建置快速應用的Json Server，以json存放資料庫，快速與API結合，未來可以嘗試提供雲端快速部屬的firebase或最近很夯的MongoDB使用。

  • 未來應用
    目前建置已將整個收繳費用之金流串接起來，算是基本架設，未來可以嘗試購物網站的實作，並且建構出更完整的網頁功能，

  • 賽後心得
    第一次參加鐵人賽，其實跌跌撞撞的，加上部分程式的開發都是第一次，在沒有太多時間建置的情況下，花了不少時間反覆調整的，給自己的建議是未來再來一次鐵人賽，一開始可以花多一點時間規劃架構及章節。這次就給自己個勉強及格的分數，以後再好好鐵人一下~