Edit UI: Use VueRouter to pass the businessID to views
- Vorherrschende Sprache
- JavaScript
- Sterne
- 23
- Forks
- 62
- Ø Merge
- 24 Min.
- Gemergte PRs (30 T.)
- 1
Beschreibung
## 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
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
Beginne in App.vue und verfolge den benutzerdefinierten fetchConfig()-Ablauf, der BUSINESS_ID extrahiert und speichert. Überprüfe die vorhandenen VueRouter-Routendefinitionen und die verlinkte Anleitung zur Übergabe von Props in VueRouter; abgeschlossen ist die Aufgabe, wenn Views businessId über Route-Props erhalten und die Validierung von einem navigation guard statt über den benutzerdefinierten sessionStorage-Ablauf übernommen wird.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript
- Bereich
- frontend
- Issue-Typ
- Refactoring
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 32/100