[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 }
},

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

  • 未来应用
    目前建置已将整个收缴费用之金流串接起来，算是基本架设，未来可以尝试购物网站的实作，并且建构出更完整的网页功能，

  • 赛後心得
    第一次参加铁人赛，其实跌跌撞撞的，加上部分程序的开发都是第一次，在没有太多时间建置的情况下，花了不少时间反覆调整的，给自己的建议是未来再来一次铁人赛，一开始可以花多一点时间规划架构及章节。这次就给自己个勉强及格的分数，以後再好好铁人一下~