Getting user information in nuxt/auth: A simple guide

I need help accessing data stored in local storage using the testData() function. When I try, my console prints out {ob: Observer}. The data is set inside the login() function and I can see it in my browser.

Being new to front-end development, any assistance would be greatly appreciated.

Vue

testData() {
  console.log(this.$auth.$storage.getUniversal('user'))
},

login() {
  this.$auth.loginWith('local', {
    data: { 
      username: this.username,
      password: this.password
    }
  }).then(response => {
    const user = response.data
    this.$auth.setUser(user)
    this.$auth.$storage.setUniversal('user', user.username, true)
  })
},

localStorage

https://i.sstatic.net/PK8Lk.png

Answer №1

To retrieve the user information from nuxt/auth, you can use either this.$auth.$storage.state.user or this.$auth.user.
When you encounter Observer, it simply indicates that it is monitoring your data, although the object is currently empty; essentially, it serves as a getter.

I attempted to refresh and confirmed that in this scenario, the object remains empty.

However, upon logging out and back in, or by proceeding with the typical login process and examining the value using a button or similar method, you will observe that it contains the values for email and password.

Furthermore, I am uncertain if utilizing

this.$auth.$storage.setUniversal('user', user.username, true)
is necessary since the module handles this task automatically.
What specific action are you trying to accomplish here?

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

Determine whether a child node is an element or a text node using JavaScript

I am experiencing an issue with the childNodes property. Here is the scenario: <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> //childNodes.length = 7 However, <ol><li> ...

Does the AngularJS Controller disappear when the DOM element is "deleted"?

One challenge I encountered is regarding a directive that is connected to an angularjs controller, as shown below: <my-directive id="my-unique-directive" ng-controller="MyController"></my-directive> In the controller, at a certain point, I ne ...

Making Jquery data tables editable for cells

After spending the last 4 hours tinkering with this, I have hit a wall and can't seem to make any progress. I am attempting to use the jquery datatable featured in this link: http://datatables.net/examples/api/editable.html (a widely used plugin). I h ...

Collect data entered into the input box and store them in an array for the purpose of

I need assistance with a code that involves input boxes for users to enter numerical values, which are then stored in an array. My goal is to add these values together and display the sum using an alert when a button is clicked. However, I am struggling to ...

Encountering a 500 error while trying to access a different file using the .get()

My current project involves setting up basic Express routing. However, every time I try to fetch data in order to link to a new page on my website, I encounter a 500 error. The main file managing the routing is Index.js. The content of Index.js: var expr ...

React HTML ignore line break variable is a feature that allows developers to

Can you help me with adding a line break between two variables that will be displayed properly in my HTML output? I'm trying to create an object with a single description attribute using two text variables, and I need them to be separated by a line b ...

When submitting the form for the zip code input, use an XMLHttpRequest to input the zip code and retrieve the corresponding city

I'm currently working on a project that involves inputting zip codes and retrieving the corresponding city information from . In the future, I plan to parse this data and store it as variables in my program while potentially using longitude/latitude f ...

Refine current attributes of an object in Typescript

In typescript, I have an object of type any that needs to be reshaped to align with a specific interface. I am looking for a solution to create a new object that removes any properties not defined in the interface and adds any missing properties. An exam ...

"Troubleshooting a malfunctioning PHP contact form that is not functioning properly

Here's some of my JavaScript code: var form = $('#main-contact-form'); form.submit(function(event){ event.preventDefault(); var form_status = $('<div class="form_status"></div>'); $.ajax({ url: $(th ...

What steps can you take to prevent a potential crash from occurring when an unauthorized user attempts to access a page without logging in?

I've encountered an issue where the app crashes when trying to access a page that requires logging in. The reason for this crash is because the page attempts to load undefined data, resulting in the error: TypeError: Cannot read property 'firstN ...

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

In my Angular.JS factory, I am retrieving data from a REST Api. The REST Api endpoint is "/api/getSsls/1", where 1 represents the page number. The API response is in JSON format and contains the first ten items along with total pages/items information. I ...

Sending JSON data to the server using jqGrid: A step-by-step guide

[CHANGE] (I couldn't bear to wait 3 hours for an answer): It seems that the issue is not with the jqGrid component, many thanks to TheCodeDestroyer for identifying this. I ran this code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ...

I am having trouble incorporating .obj files into my Nuxt components

I am working on a Nuxt project that includes a background scene created with Three.js. My next goal is to import an .obj file into this scene, requiring the model to be loaded through the component. Here is the code snippet from my index.vue component: ...

Pass identical data to the view using both POST and GET methods in a node.js / Express.js application

At first, I attempted to utilize the router.post and router.get methods separately in my code. But then I made the decision to use router.all, and within the same function split POST and GET calls, using two res.render functions along with a common object ...

Gutenberg NPM remains in its original state without any alterations

I experienced some issues with the NPM when making changes in blocks or other elements as the changes were not working properly. Below is my gutenberg.php file: function MyBlocks() { wp_register_script('blocks-js', get_template_directory_ ...

The issue with Jquery .post function not functioning properly within a popup div

After spending countless hours on this issue, I feel like I'm at a loss... The problem lies in a div that pops up with a button, where the button fills data into different sections of the HTML... Everything works fine except for when I use ajax to c ...

What is the process for uploading a file selected with the Dojo Uploader to a servlet using Dojo version 1.7.5?

I've been struggling to find a proper method for posting a file selected using dojox.form.Uploader to my servlet. Unfortunately, there is limited documentation available for Dojo and not many examples, demos, or tutorials to follow. Any help with this ...

Exploring the possibilities with Vue on the LG WebOS platform

I have chosen Vue.js to build a web application for LG WebOS TV, but I am encountering an issue. The problem I am facing is that the router is not rendering anything, and there are no errors in the console. However, the same app works perfectly fine on a d ...

Instructions on importing a '.xlsx' file from a local directory into Vuejs without using "type=file" for overwriting

When working with Node.js, I am able to import and export using the code snippet below: const workbook = new Excel.Workbook(); await workbook.xlsx.readFile(filename); await workbook.xlsx.writeFile(filename); However, I now want to achieve this functiona ...

A step-by-step guide on toggling between light mode and dark mode using water.css

Implementing the water.css on my website, I have this JavaScript code: function setTheme(themeName) { localStorage.setItem('theme', themeName); document.documentElement.className = themeName; } // function to toggle between light and dark ...