iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
永豐金融APIs

永豐Vue一下-從生活尋找靈感系列 第 30

[day30]優化架構-登入登出檢核&最後一天心得

登入登出檢核

之前已經針對登入登出進行控管,非登入無法進入會員頁,按照此網站的需求,訂單建置、訂單查詢及會員專頁,因涉汲帳戶以及個資,若直接主頁之下的頁面(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 }
},
  1. 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. 原始功能,點選頁面時會警告還沒登入
    https://ithelp.ithome.com.tw/upload/images/20211015/20140924pA1BXdDwdn.png
  2. 登入後正常進入頁面,以建立訂單為例
    點選LOGOUT,畫面即跳入首頁。
    https://ithelp.ithome.com.tw/upload/images/20211015/2014092433OPRPXOJU.png
    會先顯示後跳入首頁
    https://ithelp.ithome.com.tw/upload/images/20211016/20140924nr5ycEn3p6.png
    跳回首頁
    https://ithelp.ithome.com.tw/upload/images/20211016/201409245EqTfYYrSF.png

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使用。

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

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


上一篇
[day29]優化架構-訂單留存及檢核(2)
系列文
永豐Vue一下-從生活尋找靈感30

尚未有邦友留言

立即登入留言