add authentication on navigation a.k.a navigation guards

covid-19-app-web/src/auth/login-checker.js

@@ -1,24 +1,32 @@
 import store from "@/store/";
-import router from "../router";
 
 /*
  * this file handles an authentication that we need to check before a route executes
  * */
-export const ifNotAuthenticated = (to, from, next) => {
-  store.dispatch("resetMessage").then();
-  if (store.getters.getToken === null) {
-    next();
-    return; // return if not authenticated
-  }
-  router.push({ name: "Login" });
-};
 
-export const ifAuthenticated = (to, from, next) => {
-  store.dispatch("resetMessage").then();
-  if (store.getters.getToken !== null) {
+export function checkRole(to, from, next) {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    if (store.getters.getToken === null) {
+      next({
+        path: `${store.getters.getLanguagePreference}/login`,
+        query: { nextUrl: to.fullPath }
+      });
+    } else {
+      if (
+        to.matched.some(
+          record =>
+            record.meta.roles &&
+            record.meta.roles.includes(store.getters.getUser.role)
+        )
+      ) {
+        next();
+      } else {
+        next({
+          path: `${store.getters.getLanguagePreference}/404`
+        });
+      }
+    }
+  } else {
     next();
-    return;
   }
-  console.log(true);
-  router.push(`${store.getters.getLanguagePreference}/login`);
-};
+}

covid-19-app-web/src/components/core/AppBar.vue

@@ -195,10 +195,21 @@
       style="border-radius: 20px 0 0 0"
       class="px-3 overflow-hidden"
     >
-      <v-btn v-for="(item, i) in links" :to="{ name: item.to }" :key="i" exact>
-        <span>{{ $t(item.text) }}</span>
-        <v-icon> {{ item.icon }}</v-icon>
-      </v-btn>
+      <template v-for="(link, i) in links">
+        <v-btn
+          :to="{ name: link.to }"
+          :key="i"
+          exact
+          v-if="
+            (!loggedInUser && link.roles.includes('none')) ||
+              (loggedInUser &&
+                link.roles.includes(loggedInUser.role.toLowerCase()))
+          "
+        >
+          <span>{{ $t(link.text) }}</span>
+          <v-icon> {{ link.icon }}</v-icon>
+        </v-btn>
+      </template>
     </v-bottom-navigation>
   </v-container>
 </template>

covid-19-app-web/src/router/admin.js

@@ -11,24 +11,70 @@ const SymptomDetails = () =>
   import("../views-admin/symptoms/SymptomDetails.vue");
 
 export const admin = [
-  { name: "AdminLogin", path: "login", component: Login },
-  { name: "CreateAccount", path: "register", component: CreateAccount },
+  {
+    name: "AdminLogin",
+    path: "login",
+    component: Login,
+    meta: {
+      guest: true
+    }
+  },
+  {
+    name: "CreateAccount",
+    path: "register",
+    component: CreateAccount,
+    meta: {
+      guest: true
+    }
+  },
   {
     name: "ChangePassword",
     path: "change-password",
-    component: ChangePassword
+    component: ChangePassword,
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user"]
+    }
   },
   {
     name: "ResetPassword",
     path: "reset-password",
-    component: ForgotPassword
+    component: ForgotPassword,
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user"]
+    }
+  },
+  {
+    name: "Symptoms",
+    path: "symptoms",
+    component: Symptoms,
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user"]
+    }
+  },
+  {
+    name: "InviteAdmin",
+    path: "invite-admin",
+    component: InviteAdmin,
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user"]
+    }
   },
-  { name: "Symptoms", path: "symptoms", component: Symptoms },
-  { name: "InviteAdmin", path: "invite-admin", component: InviteAdmin },
   {
     name: "SymptomDetails",
     path: "symptoms/:id/details",
     component: SymptomDetails
   },
-  { name: "Dashboard", path: "/", component: Dashboard }
+  {
+    name: "Dashboard",
+    path: "/",
+    component: Dashboard,
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user"]
+    }
+  }
 ];

covid-19-app-web/src/router/index.js

@@ -4,6 +4,7 @@ import store from "@/store/";
 import { languages } from "@/plugins/i18n";
 import { admin } from "./admin";
 import { userRoutes } from "./user-routes";
+import { checkRole } from "../auth/login-checker";
 
 Vue.use(VueRouter);
 
@@ -50,5 +51,7 @@ const router = new VueRouter({
   mode: "history",
   routes
 });
-console.log(router);
+
+router.beforeEach(checkRole);
+
 export default router;

covid-19-app-web/src/router/user-routes.js

@@ -1,5 +1,3 @@
-import { ifAuthenticated, ifNotAuthenticated } from "../auth/login-checker";
-
 const NotFound = () => import("@/views/Errors/404.vue");
 const Home = () => import("@/views/Home/Home.vue");
 const Information = () => import("@/views/Information/Information.vue");
@@ -13,34 +11,86 @@ const Login = () => import("@/views/Auth/Login.vue");
 const Register = () => import("@/views/Auth/Register.vue");
 
 export const userRoutes = [
-  { path: "information", name: "Learn", component: Information },
+  {
+    path: "information",
+    name: "Learn",
+    component: Information,
+    meta: {
+      guest: true
+    }
+  },
   {
     path: "privacy-policy",
     name: "PrivacyPolicy",
-    component: PrivacyPolicy
+    component: PrivacyPolicy,
+    meta: {
+      guest: true
+    }
   },
   { path: "references", name: "References", component: References },
   {
     path: "profile",
     name: "Profile",
     component: Profile,
-    beforeEnter: ifAuthenticated
+    meta: {
+      requiresAuth: true,
+      roles: ["ephi_user", "basic"]
+    }
   },
   {
     path: "register",
     name: "Register",
     component: Register,
-    beforeEnter: ifNotAuthenticated
+    meta: {
+      guest: true
+    }
   },
   {
     path: "login",
     name: "Login",
     component: Login,
-    beforeEnter: ifNotAuthenticated
+    meta: {
+      guest: true
+    }
+  },
+  {
+    path: "about",
+    name: "About",
+    component: About,
+    meta: {
+      guest: true
+    }
+  },
+  {
+    path: "news",
+    name: "News",
+    component: News,
+    meta: {
+      guest: true
+    }
+  },
+  {
+    path: "map",
+    name: "Map",
+    component: HeatMap,
+    meta: {
+      guest: true
+    }
   },
-  { path: "about", name: "About", component: About },
-  { path: "news", name: "News", component: News },
-  { path: "map", name: "Map", component: HeatMap },
-  { path: "", name: "Home", component: Home },
-  { path: "*", name: "404", component: NotFound }
+  {
+    path: "",
+    name: "Home",
+    component: Home,
+    meta: {
+      guest: true
+    }
+  },
+  {
+    path: "*",
+    name: "404",
+    component: NotFound,
+    meta: {
+      notFound: true
+    }
+  }
 ];

covid-19-app-web/src/views-admin/auth/Login.vue

@@ -57,14 +57,6 @@
               >
                 {{ $t("auth.login") }}
               </v-btn>
-              <v-btn
-                text
-                small
-                class="d-block mx-auto my-2"
-                @click="$router.push('register')"
-              >
-                {{ $t("auth.goToSignUp") }}
-              </v-btn>
             </div>
           </v-form>
         </v-card-text>
@@ -105,9 +97,13 @@ export default {
             store.dispatch("setUser", { user: res.data.user });
             store.dispatch("setToken", { token: res.data.token });
             store.dispatch("setStateMessage", "Successfully logged in");
-            if (res.data.user.role === "ephi_user")
+            if (this.$route.query.nextUrl !== null) {
+              this.$router.push(this.$route.query.nextUrl);
+            } else if (res.data.user.role === "ephi_user") {
               this.$router.push({ name: "Dashboard" });
-            else this.$router.push({ name: "Home" });
+            } else {
+              this.$router.push({ name: "Home" });
+            }
           },
           error => {
             store.dispatch("setStateMessage", error.response.data);

covid-19-app-web/src/views/Auth/Login.vue

@@ -85,19 +85,28 @@ export default {
       rules: Rules
     };
   },
+  created() {
+    console.log(this.$route.query.nextUrl);
+  },
   methods: {
     submit() {
       this.loading = true;
+      let query = this.$route.query;
+      console.log(query);
       ajax
         .post("auth/login", this.user)
         .then(
           res => {
             store.dispatch("setUser", { user: res.data.user });
             store.dispatch("setToken", { token: res.data.token });
             store.dispatch("setStateMessage", "Successfully logged in");
-            if (res.data.user.role === "ephi_user")
+            if (query.nextUrl) {
+              this.$router.push(query.nextUrl);
+            } else if (res.data.user.role === "ephi_user") {
               this.$router.push({ name: "Dashboard" });
-            else this.$router.push({ name: "Home" });
+            } else {
+              this.$router.push({ name: "Home" });
+            }
           },
           error => {
             store.dispatch("setStateMessage", error.response.data);