Tips for preserving login session continuity following page refresh in Vuejs

signInMe() {
 
      this.$store.dispatch('setLoggedUser', true);
      this.$store.dispatch('setGenericAccessToken', response.data.access_token);

     
      this.errorMessage = "";
    }, (error) => {
      if (error) {
        this.errorMessage = error.response.data.message;
        this.isLoginFailed = true;
        this.emailFailureCount = this.emailFailureCount + 1;
       
      }
    }).catch(error => {})
},

logout() {
  localStorage.clear();
  localStorage.setItem('userType', "G");
  this.$store.dispatch('setLoggedUser', false);
  this.$store.dispatch('setAccessToken', '');
  this.$router.push('/')
  this.registeredUser = false;
},
<div class="myprofileroute" @click="logout">Logout</div>

Upon successful login with valid credentials, I can navigate to a specific page. However, the problem arises when I find myself logged out even without explicitly clicking the logout button. This unexpected logout occurs even upon refreshing the page.

Answer №1

To ensure seamless access, store the access token in your local/session storage and verify its existence on every page load.

async login(){
  try{
    const userData = await axios.post('yourapi');
    const token = userData.access_token;
    localStorage.setItem('userData', userData);
    localStorage.setItem('accessToken', token);
    this.$router.push('/dashboard');
  }catch(err){
     //Handle errors
  }
}

You can also handle it within your main layout or Vue instance:

mounted(){
  const userData = localStorage.getItem('userData');
  const accessToken = localStorage.getItem('accessToken');
  localStorage.setItem('userType', "G");
  this.$store.dispatch('setLoggedUser', userData);
  this.$store.dispatch('setAccessToken', accessToken);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Find items where a certain value matches any of the values in another array and return them

I'm seeking assistance with a specific task. I have an object structured as shown below: SOMEKEY: { "key1": val1, "key2": val2 } Additionally, I have an array that contains string values like this: [stringA, stringB, stringC ...

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)

I am working on a project that involves displaying a tree with information from the Catalogue of Life, including details such as Kingdom, phylum, order, and more. My approach includes using ajax/php to interact with a mySQL database and javascript to handl ...

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

What is the best way to ensure that one method waits for another method to complete before proceeding?

Below is a React method that needs completion for uploading images to cloudinary and setting the URL in state before executing the API call addStudent. The order of execution seems correct at first glance, but the last API call crashes due to base64 data n ...

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

I am working with JSON data that looks like this: [ { "taxonomy_slug": "product_cat", "taxonomy_name": "Categories", "frontend_slug": "product-category" }, { ...

Convert a relative path to an absolute path using the file:// protocol

When I scrape a website with similar html content, I come across the following code: <a href="/pages/1></a> In addition to this, I have access to the window.location object which contains: origin:"http://www.example.org" This allows me to ...

One set of objects is active in retrieving data, while the other remains inactive

I'm working with an array of objects and here is what it looks like: const default_apps = [ { 'post_title': 'Excel', }, { 'post_title': 'Word', }, { 'post_title': 'SharePoi ...

Zoom out the slider when scrolling

Take a look at this link and as you scroll down the page, notice how the image transitions to iPhone. Can anyone provide insight on how this effect is achieved? ...

How can you store JavaScript objects to files, including their methods, in a Node.js environment?

In reading about saving objects to files in Node.js here on Stack Overflow, I understand the process. However, I am curious if there is a method that allows for writing an object in a manner that would enable me to reload the object into memory along wit ...

Designing a user interface that consists of numerous distinct components

Challenge I'm faced with a dilemma regarding site A, which is built using React. Specifically, I need to find a way to integrate smaller React components into site A whenever a user navigates to a specific page within the site. Each of these smalle ...

Fetching content and an image simultaneously via AJAX

My website features a photo gallery that I created using the code below: /*Begin Photo Gallery Code*/ var images = ['g1.jpg', 'g2.jpg', 'g3.jpg', 'g4.jpg']; function loadImage(src) { ...

Utilize Google Charts Table Chart to extract data from an object-literal notation data source

Here's a look at the data source and Listener function: Data Source var data = new google.visualization.DataTable( { cols: [{ type: 'string', label: 'Col1' }, ...

Ways to apply the strategy pattern in Vue component implementation

Here's the scenario: I possess a Cat, Dog, and Horse, all of which abide by the Animal interface. Compact components exist for each one - DogComponent, CatComponent, and HorseComponent. Query: How can I develop an AnimalComponent that is capable of ...

'AngularJS' filtering feature

I am dealing with an array of objects and I need to extract a specific value when a key is passed in the 'filter' function. Despite my best efforts, the controller code snippet provided below returns an undefined response. Can someone please assi ...

Generating a tag next to an entry field using material-ui's TextField and getInputProps

In my project, I am utilizing a material-ui TextField to design an input alongside a label for a typeahead picker component using downshift. After exploring the demos, I have implemented the following code snippet: <FormControl fullWidth className={cl ...

Trouble with text box focus functionality

Can someone help me focus a text box using code? Here is the code snippet: <input></input> <div id="click">Click</div> $(document).ready(function(){ $("#click").live("click", function() { var inputBox = $(this).prev(); $( ...

Adding information to a single class that shares a common name

Currently, I have successfully implemented a row cloning scenario where multiple dynamic rows are created after confirming an inventory number from a MySQL database. However, I am facing an issue with inserting the inventory data only to the next DIV eleme ...

Eliminate duplicate entries in typeahead.js by ensuring unique data sources for both prefetch and remote

Currently, I have implemented typeahead.js with both prefetch and remote data sources. You can check out the example here. $(document).ready(function() { var castDirectors = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('val ...

What is the method for obtaining the dimensions of a shape drawn on Google Maps?

Is there a way to retrieve the dimensions of a shape drawn using the Google Maps API? I would like to obtain the measurements and include labels on top of the shape. Take a look at this image for reference The event argument in the overlay event does no ...

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...