Added global guard and meta field

Author: ba0708

src/ViewProfile.vue

@@ -1,18 +1,3 @@
 <template>
     <h1>My Profile</h1>
-</template>
-
-<script>
-    import { authService } from './main';
-
-    export default {
-        beforeRouteEnter(to, from, next) {
-            if (!authService.isLoggedIn) {
-                alert("You must be logged in!");
-                return next(false);
-            }
-
-            next();
-        }
-    }
-</script>
+</template>

src/main.js

@@ -23,6 +23,17 @@ const router = new VueRouter({
     }
 });
 
+router.beforeEach((to, from, next) => {
+    if (to.matched.some(record => record.meta.isAuthRequired)) {
+        if (!authService.isLoggedIn) {
+            alert("You must be logged in!");
+            return next(false);
+        }
+    }
+    
+    next();
+});
+
 Vue.filter('currency', function(value) {
     let formatter = new Intl.NumberFormat('en-US', {
         style: 'currency',

src/routes.js

@@ -18,7 +18,10 @@ export const routes = [
     {
         path: '/user/profile',
         name: 'viewProfile',
-        component: ViewProfile
+        component: ViewProfile,
+        meta: {
+            isAuthRequired: true
+        }
     },
     { path: '/cart', component: Cart },
     { path: '*', component: { template: '<h1>Page Not Found!</h1>' } }