Leverage server-side data processing capabilities in NuxtJS

I am currently in the process of creating a session cookie for my user. To do this, I send a request to my backend API with the hope of receiving a token in return. Once I have obtained this token, I need to store it in a cookie to establish the user's session. However, alongside the token, additional information is also returned such as the screens that the user will have access to. I am seeking advice on how to securely handle this information without exposing it or the function responsible for generating the cookie. It is worth noting that I am working with TypeScript and using "cookie-universal-nuxt" to manage cookies. Additionally, I have created a custom plugin to process the information and create the cookie. The API request is being made from the client side.

Although I have identified some potential solutions to this issue, I have not tested them as they seem somewhat makeshift to me.

Edit:

The primary concern is ensuring complete isolation of the session. While the current session setup is secure once established, there exists a vulnerability due to frontend manipulation when constructing the cookie. This manipulation occurs on the client side, allowing users to access both the backend response and the function responsible for building the session cookie. I aim to enhance this security further by preventing any frontend manipulation that could lead to fake sessions. While the cookie itself is robust, I would like to conceal the frontend function used to construct the session to prevent users from viewing API data or crafting counterfeit sessions. To achieve this goal, I believe running the API request from the server side and concealing the explicit API response could be a viable solution.

This question was generated using Google Translate and originally written in Portuguese (Brazil).

Answer №1

  • When utilizing nuxt3, take advantage of its integrated cookie driver for seamless use.
  • Configure your backend to function as an API rather than a web application. Investigate JWT authentication.
  • Incorporate JSON acceptance into your fetch function to ensure that no unnecessary information is returned from the backend, such as web details.

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

Vue.js variable routes present an issue where the Favicon fails to appear

I've successfully set my favicon in the index.html file for my Vue webpack SPA. It displays properly when I visit the main site or any standard route, but it fails to show up when I navigate to a dynamic route (path: "/traduzione/:translation"). I&ap ...

Is it beneficial to store commonly used data in JSON format within a MySQL database?

When working with prospects in a Vue.js app, the main focus is on managing various elements like contacts, listings, and other objects/tables. Each prospect can have multiple interactions, with some having up to 30 or more per prospect, while others like e ...

Vue 3 allows for creating multiple cards with unique contents

I received this outcome: Content duplicated but not cloned as a card element Below is the code snippet <script setup> import { ref } from 'vue'; defineProps({ project: String, }); const projectList = ref([ { img: './src/asse ...

Troubleshooting problems with Vue 2, vue-router 2, and Laravel 5.3

Seeking assistance in resolving this console error: Error: router.map is not a function Currently utilizing browserify and laravel5.3 Here is the snippet of my app.js code : import Vue from 'vue/dist/vue.js'; var VueRouter = require('v ...

Ways to implement children in vue.js

For frontend development in my various projects, I utilize React.js and Vue.js. In React, I can enclose templates with the MyComponent component like so: <MyComponent> <div>Here</div> </MyComponent> Within the MyCom ...

NG8003 error: ExportAs 'ngForm' directive not found in the system

I encountered an issue with my first Angular 11 project: No directive found with exportAs 'ngForm'. Despite importing FormsModule and ReactiveFormsModule in app.module.ts, the error persists. Here is the code snippet: This is from product.compon ...

What is the best way to include arrays in VueJS?

Currently, I am working with two arrays in my Vue application. The first array called desserts lists all the desserts that I have. The second array, moreDesserts, displays checkboxes with values. When a user selects a checkbox, the value is added to the se ...

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

While there are numerous similar questions on StackOverflow, none of them fully address all of my requirements in a single solution. Any assistance would be greatly appreciated. The Issue at Hand Within my React application, I am in need of a text box tha ...

Allow for an optional second parameter in Typescript type definition

Here are two very similar types that I have: import { VariantProps } from "@stitches/core"; export type VariantOption< Component extends { [key: symbol | string]: any }, VariantName extends keyof VariantProps<Component> > = Extra ...

Returning a 404 error specifically for the '/' route in Nuxt JS during deployment on a shared hosting server

I've been working on setting up a Nuxt app using the @nuxt/pwa starter-template for Server Side Rendering on a Shared Hosting platform. The Nuxt app is currently running on "http://localhost:50000". My goal is to display the running app from "http://e ...

Vue js: Automatically assign alternate text to images that are not found

Currently, I am in the process of developing a website that features a variety of products, each with its own unique image. For binding the image URL to the source attribute, I use the following code snippet: <img :src="product.ImageUrl"/> In case ...

IE11 and how it handles Typescript and promises

Currently, I am utilizing Typescript version 2.4.2 along with Webpack for compilation purposes. Despite successful compilation, when running my code on IE11, an error 'Promise' is undefined arises. Below is a glimpse of my tsconfig: { "comp ...

There is an issue with types in React when using TypeScript: The type '(user: User) => Element' cannot be assigned to the type '((props: User) => any) & ReactNode'

I'm encountering an error in the terminal and need some assistance. I am not well-versed in TypeScript, so any guidance to resolve this issue would be highly appreciated. https://i.stack.imgur.com/PWATV.png The Loadable component code: import { Circ ...

Guide to adding jquery with typings installation

Need assistance: typings install jquery --global typings ERR! message Unable to find "jquery" ("npm") in the registry. Did you want to try searching another source? Also, if you want contribute these typings, please help us: https://github.com/typings/re ...

Retrieve all elements within an Angular6 Directive that share the same name as the Directive

I have created a custom Directive called isSelected and applied it to several elements in different components as shown below: <i isSelected class="icon"></i> <i isSelected class="icon"></i> <i isSelected class="icon"></i ...

Steer clear of using inline styling when designing with Mui V5

I firmly believe that separating styling from code enhances the clarity and cleanliness of the code. Personally, I have always viewed using inline styling (style={{}}) as a bad practice. In Mui V4, it was simple - I would create a styles file and import i ...

Vuetify Expandable Data Table: Changing the position of the expanded row

Exploring the expandable data table feature in Vuetify, you can find more information in the Vuetify documentation To customize the expanded item, we can utilize the <template v-slot:expanded-item="{ headers }"> template. I have successfully includ ...

A step-by-step guide on making a list item clickable and redirecting to a URL using Vue.js

Utilizing vue.js, I have successfully configured a navigation bar with multiple list elements. However, I am seeking guidance on how to redirect one of the list elements to an external website, such as https://www.google.com/. Within my router file, each e ...

Guide to implementing controllers in vuejs2

Hey there, I recently started using vuejs2 with a project that is based on laravel backend. In my vuejs2 project, I wrote the following code in the file routes.js export default new VueRouter({ routes: [{ path: '/test', component: ...

Instructions on how to implement a readmore button for texts that exceed a specific character length

I am attempting to display a "Read more" button if the length of a comment exceeds 80 characters. This is how I am checking it: <tr repeat.for="m of comments"> <td if.bind="showLess">${m.comment.length < 80 ? m.comment : ...