Skip to content

2 ‐ Router

Jump to bottom
IvyZ23 edited this page Aug 5, 2023 · 1 revision

Routes

  • /
    • landing page upon visiting the website
    • navigation guard: when the user is logged in, they can't enter this route
  • /login
    • login page where user can log in through google
    • navigation guard: when the user is logged in, they can't enter this route
  • /guidance/dashboard
    • guidance landing page upon logging in
    • navigation guard: students can't enter this route
  • /guidance/studentlist
    • where guidance counselors can view their students
    • navigation guard: students can't enter this route
  • /guidance/calendar
    • where guidance counselors can create, modify, and view scheduled meetings with students
    • navigation guard: students can't enter this route
  • /guidance/survey/:osis
    • where guidance counselors can view and modify a student's survey
    • navigation guard: students can't enter this route
  • /student/dashboard
    • student landing page upon logging in
    • navigation guard: guidance can't enter this route
  • /student/survey
    • survey page students view to complete their survey
    • navigation guard: guidance can't enter this route; can't enter this route when survey is closed
  • /student/survey/review
    • final page where students confirm their answers before submitting
    • navigation guard: guidance can't enter this route; can't enter this route when survey is closed
  • /student/survey/closed
    • page to view survey after due date is over or guidance has locked
    • navigation guard: guidance can't enter this route; can't enter this route when survey is open

Navigation Guards

Navigation guards were put in place to prevent users from navigating to routes they're not authorized to go to.

router.beforeEach(async (to) => {
  const userStore = useUserStore();
  const loggedIn = userStore.isLoggedIn;

  const publicPages = ["/", "/login"];
  const authRequired = !publicPages.includes(to.path);

  if (authRequired && !loggedIn) {
    return { name: "login" };
  }
});

The above code segment checks for the user's authentication/login status before they are redirected to any non-public route. If the user's authentication and login status both turn up false, this indicates that they are not logged in. The user will be redirected to the login page. Routes that are not subjected to this navigation guard are public pages, including the landing page and login page.

Routes that require authentication are also differentiated as guidance or student pages. Of course, a student should not be able to navigate to the guidance counselor home page, nor vice versa.

{
      path: "/guidance/dashboard",
      name: "guidanceDash",
      component: () => import("../views/GuidanceHome.vue"),
      beforeEnter: (to) => {
        const userStore = useUserStore();

        if (userStore.userType === 'student') {
          return { name: "studentDash" };
        }
      }
}

This is an example for preventing a student from viewing the guidance counselor dashboard. The navigation guard checks for the user's userType, which will either be student or guidance when logged in. If the user is a student, they will be redirected away from the guidance route to the student dashboard.

Preventing guidance counselors from entering student routes work the same way:

{
      path: '/student/dashboard',
      name: 'studentDash',
      component: () => import('../views/dashboard.vue'),
      beforeEnter: (to) => {
        const userStore = useUserStore();

        if (userStore.userType === 'guidance') {
          return { name: "guidanceDash" };
        }
      }
}

For more information on navigation guards and how they work, visit the documentation.

Clone this wiki locally