- We do not want to show the user the template before the data is available.
- We do not want to show the user the template before the data is available.
- We would probably want to use a little indirection using Vuex to track how many APIs are waiting responses before calling done. This would mean having some global state that is tracking this count, starting and stopping the progress as needed.
- In-component Route Gaurds
- In-component Route Gaurds
- Global and Per-Route Gaurds (Unltimately will use this.)
- Global and Per-Route Gaurds (Unltimately will use this.)
- Use the `npx json-server -d 1500 --watch ./db.json` command to simulate a slow network response.
- Use the `npx json-server -d 1500 --watch ./db.json` command to simulate a slow network response.
- Good reasons to use interceptors:
- Good reasons to use interceptors:
- On request to set authorization tokens
- On request to set authorization tokens
- On respinse to format or filter data before it reaches into your app
- On respinse to format or filter data before it reaches into your app
- On response to catch 401 not authorized responses
- On response to catch 401 not authorized responses. You might want to trigger and action to renew your token, or redirect to login.
- Vue Router provides our solution with 3 addtional hooks called route navigation gaurds. All must call the `next` function.
1. `beforeRouteEnter(routeTo, routeFrom, next)` Which is called before the component is created. You will not have access to `this` in the targeted component.
2. `beforeRouteUpdate(routeTo, routeFrom, next)` Called when the route changes, but still using the same component. Has access to `this`.
3. `beforeRouteLeave(routeTo, routeFrom, next)` Called when the this component is navigated away from. Has access to `this`.
- `routeTo` is the Route being navigated to
- `routeFrom` is the current Route
- `next` is a function that MUST be called to resolve the hook.
- `next()` with no params will confirm the navigation
- `next(false)` will cancel the navigation.
- `next('/')` with a path will redirect to the provided path. We can also specify a named path `next({ name: 'event-list' })` if we wanted. You can put any options that you could put in your router link also with this method.
- An example of using `beforeRouteLeave(routeTo, routeFrom, next)` might be to prompt a user to save thier work before navigating away from the page.
```
beforeRouteLeave(routeTo, routeFrom, next) {
const answer = window.confirm('Do you really want to leave? You have unsaved changes`)
if (answer){
next()
} else {
next(false)
}
}
```
### Global Route Gaurds & Per Route Gaurds
Global Route Gaurds allow us to add hooks that run whenever nagigation is triggered. These gaurds are called on the `router` object. We need to set the `router` object to a contant.
- `beforeEach` runs before _navigating_ to any component and must call `next()`
```
router.beforeEach((routeTo, routeFrom, next) => {
next()
})
```
- `afterEach` runs before the target route component is _created_ and doesn't have a `next` method to call.
```
router.afterEach((routeTo, routeFrom) => {
...
})
```
- The ordering of hooks are as follows:
1. `router.beforeEach()` Global gaurd
2. `beforeEnter()` Per route gaurd
3. `beforeRouteEnter()` Router guard in component
4. `router.afterEach()` Global gaurd
5. `beforeCreate()` Component hook
6. `created()` Component hook
7. ...
### Per Route Gaurds
Per Route gaurds let us tap into for example the `beforeEnter` hook within our `/src/router.js` which will run before routing to the component.
```
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'event-list',
component: EventList
beforeEnter((routeTo, routeFrom, next) => {
fetchEvent()
next()
}
},
```
Since all the API action calls are occuring in the router lifecycle hooks at this time. You can actually remove all vuex code from the component. This could make your code simpler and easier to maintain. You will need to ensure that the actions in your vuex store are returning the objects you are working with however to ensure this works.
## Following along?
## Following along?
We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.
We encourage you to follow the course on Vue Mastery, and code along with us. This course has tags representing the start and finish of each level, just in case you get stuck. Here's the start and ending code of each lesson, if you'd like to download them.
To achieve this you would need to have the state returned from the api call and pass that into the target component as a prop.
