StarBlog Blog Development Notes: Frontend Development - Navigation Guards

The router object provides us with the beforeEach method, which allows you to perform certain operations before each route change. Also known as navigation guards, we'll use them here to implement auxiliary features like authentication.

Modify the router/index.js file to add a navigation guard that checks whether the user's session has expired on every route change. If the login is valid and the user is navigating to the login page, redirect them directly to the homepage. If they're trying to access a non-login page but their session has expired, redirect them to the login page to authenticate.

The code is as follows:

router.beforeEach((to, from, next) => {
  // After successful login on the login page, user information is saved in the session.
  // Its lifetime is tied to the session, becoming invalid when the page is closed.
  let userName = sessionStorage.getItem('user')
  if (to.path === '/login') {
    // If accessing the login page and user session info exists, meaning already logged in, redirect to the homepage
    if (userName) next({path: '/'})
    else next()
  } else {
    if (!userName) {
      // If accessing a non-login page and user session info doesn't exist, meaning not logged in, redirect to the login page
      next({path: '/login'})
    }
  }
})