Logout.vue

The is where the user will be redirected when they logout from their account.

export default

// Exporting the Vue component
export default {}

Inside this is where we define data, methods, computed properties, and lifecycle hooks.

mounted

// Lifecycle hook: Executed when the component is mounted to the DOM
mounted() {
  // Remove login cookies
  this.$cookie.removeCookie("L_userId");
  this.$cookie.removeCookie("L_username");
  // Remove profile-related cookies
  this.$cookie.removeCookie("P_username");
  this.$cookie.removeCookie("P_name");
  this.$cookie.removeCookie("P_email");
  this.$cookie.removeCookie("P_company");
  this.$cookie.removeCookie("P_countBookmark");
  this.$cookie.removeCookie("P_countMap");
  this.$cookie.removeCookie("P_countPublishedMap");
  // Remove cookies related to ExcelToMap functionality
  this.$cookie.removeCookie("ETM_allData");
  this.$cookie.removeCookie("ETM_currentData");
  // Remove cookies related to Forgot Password functionality
  this.$cookie.removeCookie("FP_otp");
  this.$cookie.removeCookie("FP_userId");
  // Remove cookies related to MapToExcel functionality
  this.$cookie.removeCookie("MTE_allData");
  this.$cookie.removeCookie("MTE_countId");
  // Display an alert to notify the user that they have been logged out
  alert("LOGGED OUT.");
  // Redirect the user to the home page ("/")
  this.$router.push("/");
}

This is called mounted lifecycle hook. The mounted hook is called after the component has been added to the DOM, making it a good place to perform initial setup and actions.

To explain what this mounted hook does:

1. It removes all the cookies that were created across the pages whilst the user was logged in.