Vue.js 2 Web Development Projects

Private routes with navigation guards

Now that we have an authentication system ready, we can have different types of routes:

• Public routes are always accessible
• Private routes are restricted to logged users
• Guest routes are accessible only to users that are not connected yet

We are going to create one of the routes components ahead of time to test our code:

1. Let's create the TicketsLayout.vue component that we will use later to display either of the user support tickets:

      <template>        <main class="tickets-layout">          <h1>Your Support tickets</h1>          <!-- TODO -->        </main>      </template>

2. Then, add the corresponding route in the router.js file:

      import TicketsLayout from './components/TicketsLayout.vue'      const routes = [        // ...        { path: '/tickets', ...