Here's the dilemma:
My understanding is that accessing LocaleStorage from Middleware in Universal mode
is currently not possible (at least not out-of-the-box.)
Question:
Is there any way to solve this issue? Are there any modules or solutions available?
(if so - what would you recommend as a first step?)
Storing data in local storage within Nuxt middleware is restricted to client-side only. However, utilizing cookies or accessing the Vuex store are viable alternatives:
export default (context) => {
if (!context.app.context.app.$cookies.get('loginState')) {
return context.redirect('/login')
}
}
Alternatively, you can access the store in middleware:
export default function({ store, redirect }) {
if (!store.getters.GET_LOGIN_STATE) {
return redirect('/login')
}
}
In order to work around this limitation, consider storing your data in either the store or a cookie.
If you're looking to save data on the client side that won't be deleted upon page refresh, consider using cookies. Cookies can be accessed in the middleware like so:
When utilizing Nuxt, the context contains a property called req, and the cookies are typically attached to the header.
export default function ({ req, store}) {
let cookie = require('cookie');
let cookies = req.headers.cookie;
let parsedCookies = cookie.parse(cookies);
console.log(parsedCookies);
}
In this demonstration, we are utilizing the cookie package to parse the cookies: npm i cookie
Encountering difficulties with rendering my application only upon pushing to Heroku. Local execution operates smoothly. My setup involves webpack cli vue. Below is a portion of my package.json file: "scripts": { "build": "node build/build.js", " ...
Hey there! I have a JSP page with a table where data is displayed by iterating through a list from the action class. Each row in the table has a refresh button at row level. Here is a snippet of the JSP: <script type="text/javascript"> functi ...
When it comes to asking questions, I typically provide a lot more detail and use specific wording in my titles. However, I'm currently facing an issue that has left me stumped on where to find the solution. Recently, I delved into learning Node JS an ...
**I am currently in the process of creating a login route that can accept either a username or email. However, I encountered an issue where one field is being set to undefined when the other field is available, resulting in an error. My regex is specific ...
I am facing an issue where I have multiple objects with the same properties and want to merge them based on a common key-value pair at the first level. Although I know about using the spread operator like this: const obj3 = {...obj1, ...obj2} The problem ...
I currently have a Node.js server up and running as the API server for a service that I am developing for a company. The dates stored in the MySQL server that it connects to are related to event start times. Insertion of these dates is flawless, and when ...
After successfully developing an app with Ionic and Vue 3, I decided to transfer the same functionality to my website's portal subdomain using the existing code. Additionally, I have another subdomain (www) that points to a separate HTML-only site wit ...
I need to implement a scroll-to-div feature in my React App. However, the current structure of my app is preventing me from passing refs as props correctly, making it challenging to utilize ref.current.scrollIntoView(). The layout of my code looks like th ...
My NodeJS application currently authenticates users through a third-party app. Once the app retrieves user data, a cookie is generated and sent to the client for React to access the user data from that Cookie. Should I stick with using cookies or consi ...
I'm currently facing an issue with implementing the management of an HTTP 413: Request entity too large error from my server. I've made the following attempt to address it: $.ajax({ url: "submit.php", data: { "data": POSTData ...
I'm in the process of developing a quiz system where different selections lead to distinct outcomes, but I'm facing an issue where the output remains the same. What might be causing this problem? As an example, a user chooses between button 1 an ...
Can anyone help me with accessing JSON data in the DOM using Vue.js? Here is my script tag: <script> import axios from "axios"; export default { components: {}, data() { return { responseObject: "" }; }, asy ...
Struggling to integrate AngularJS on the front end with Resteasy as my Rest API. The issue I'm encountering is that my @FormParam values are always null when sending parameters using AngularJS. Below is a snippet of my JavaScript code: $scope.addPe ...
Currently, I am working on a project that involves generating collages from sets of photos. This process includes averaging the pixels' colors of the images and then using that averaged color to plot points on the canvas. However, when I zoom in on re ...
Struggling with simple binding in Angular and Jade. I've tried moving JavaScript references to the end of the document based on advice from previous answers, but still no luck. Any ideas on what might be wrong? File: angular.jade extends layout blo ...
I have encountered a situation where I am using an npm package named foo that is not available on DefinitelyTyped or may be outdated. Despite this, I still want to consume it under stricter settings like noImplicitAny, so I need to create custom definition ...
Here is the link: "jsfiddle.net/nLJ79/". Can you try to find a solution to make the owl carousel vertical? ...
I'm having a small issue with a webpage I am creating. Essentially, I am looking to validate whether a user has selected a file and then upload it to the server. I understand this can be done using JavaScript: if(document.getElementById("uploadBox"). ...
Here is an example of an Ajax call being made to a different domain: <script> $.ajax({ url: 'url?callback=?', dataType: 'jsonp', success: function (data) { alert(data[0].DeviceName) ...
Describing my current scenario: I have a requirement where I need to be able to navigate to a /details page by clicking on an image. However, when I click on the image, the URL gets refreshed but my component does not load. I attempted various solutions ...