Edit UI: Use VueRouter to pass the businessID to views
- Ngôn ngữ chính
- JavaScript
- Star
- 23
- Fork
- 62
- Merge trung bình
- 24 phút
- Pull request đã merge (30 ngày)
- 1
Mô tả
## What is the problem?
At present, we're not using VueRouter to pass the businessID to the views as property. Instead, we're using a non-standard approach that uses custom code, from a function called `fetchConfig()` called from App.vue. Like this:
```javascript
// get Business ID and validate that it looks OK
// it should be first token after Base URL in Pathname
// FUTURE: improve Business ID validation
const id = windowLocationPathname.replace(processEnvBaseUrl, '').split('/', 1)[0]
const businessIdRegex = /^(BC|C|CP|FM)\d{7}$/
if (businessIdRegex.test(id)) { // Allow corps/firms/coop
sessionStorage.setItem('BUSINESS_ID', id)
} else {
return Promise.reject(new Error('Missing or invalid Business ID.'))
}
```
## What is the impact?
A custom solution to pass the businessID to Vue:
- makes onboarding new developers more difficult
- requires additional testing and documentation
- may have undiscovered security weaknesses
## Proposed solution
Use VueRouter's beautiful, declarative syntax to handle the businessID instead like this:
```javascript
{
path: '/businesses/edit/:businessId/limitedRestorationExtension',
name: RouteNames.LIMITED_RESTORATION_EXTENSION,
component: LimitedRestorationExtension,
props: true
},
```
Then in the view component, `businessId` is available as a prop. The businessId validation should be performed by a "navigation guard" inside VueRouter.
See: https://v3.router.vuejs.org/guide/essentials/passing-props.html
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Hướng nghiên cứu
Bắt đầu từ App.vue và lần theo luồng fetchConfig() tùy chỉnh để trích xuất và lưu BUSINESS_ID. Xem lại các định nghĩa route hiện có của VueRouter và hướng dẫn VueRouter được liên kết về việc truyền props; hoàn tất nghĩa là các view nhận businessId thông qua route props và việc xác thực được xử lý bằng navigation guard thay vì luồng sessionStorage tùy chỉnh.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript
- Lĩnh vực
- frontend
- Loại issue
- Tái cấu trúc
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 32/100