Added route guard

Author: ba0708

src/App.vue

@@ -22,6 +22,13 @@
 
                         <div class="nav navbar-nav navbar-right">
                             <div class="stats">{{ cart.items.length }} <template v-if="cart.items.length == 1">item</template><template v-else>items</template> in cart, totalling {{ cartTotal | currency }}</div>
+
+                            <div style="margin-top: 8px;">
+                                <router-link :to="{ name: 'viewProfile' }">My Profile</router-link>
+                                &nbsp;
+                                <button v-if="auth.isLoggedIn" class="btn btn-primary" @click="auth.isLoggedIn = false">Log out</button>
+                                <button v-else class="btn btn-primary" @click="auth.isLoggedIn = true">Log in</button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -40,14 +47,16 @@
 <script>
     import { eventBus } from './main';
     import CartMixin from './mixins/cart';
+    import { authService } from './main';
 
     export default {
         mixins: [ CartMixin ],
         data() {
             return {
                 cart: {
                     items: []
-                }
+                },
+                auth: authService
             };
         },
         created() {

src/ViewProfile.vue

@@ -0,0 +1,3 @@
+<template>
+    <h1>My Profile</h1>
+</template>

src/main.js

@@ -34,6 +34,7 @@ Vue.filter('currency', function(value) {
 });
 
 export const eventBus = new Vue();
+export const authService = { isLoggedIn: false };
 
 new Vue({
     el: '#app',

src/routes.js

@@ -4,6 +4,8 @@ import Cart from './Cart.vue';
 import Product from './Product.vue';
 import ProductReviews from './ProductReviews.vue';
 import SpecialOffer from './SpecialOffer.vue';
+import ViewProfile from './ViewProfile.vue';
+import { authService } from './main';
 
 export const routes = [
     { path: '', components: {
@@ -14,6 +16,19 @@ export const routes = [
         { path: 'details', name: 'viewProduct', props: true, component: ViewProduct },
         { path: 'reviews', name: 'productReviews', props: true, component: ProductReviews }
     ] },
+    {
+        path: '/user/profile',
+        name: 'viewProfile',
+        component: ViewProfile,
+        beforeEnter(to, from, next) {
+            if (!authService.isLoggedIn) {
+                alert("You must be logged in!");
+                return next(false);
+            }
+        
+            next();
+        }
+    },
     { path: '/cart', component: Cart },
     { path: '*', component: { template: '<h1>Page Not Found!</h1>' } }
 ];