Protecting pages with navigation guards

At this point, we can open the login modal manually, but we don't yet have any protected routes to prevent access until the user has logged in. Let's remedy this by creating an empty checkout page ready for the next chapter, when we start processing payments. Create a ClientApp/pages/Checkout.vue component with a barebones template section as follows:

<template>
  <b-containerclass="page pt-4">
    <h1>Checkout</h1>
  </b-container>
</template>

Next, open up ClientApp/boot.js and, right beneath the other page component imports, add the following:

import Checkout from "./pages/Checkout.vue";

Finally, in the same file, change the routes array to include a route definition for this new checkout page:

constroutes= [
  { path:"/products", component:Catalogue },
  { path:"/products/:slug", component:Product },
  { path:"/cart", component:Cart },
  { path: "/checkout", component: Checkout, meta:
  { requiresAuth: true } },
...