Sending information between children components in VueORTransferring data between

So, I have a question regarding the Authentication section of my application.

Within my application, I have various components and routes, including register and login.

The register functionality is working properly with the API, storing both the username and account_id in the database upon successful registration.

However, when attempting to log in, the response contains the username and token. To access certain routes that require users to be logged in, I need to check if a token is present. Is there a way to create a global variable to store the token value for easy access by other components?

javascriptauthenticationvue.jstokenregistration

Answer №1

To securely store your token, consider using cookies or local storage. If you are utilizing Vuex, you can also save the token in the state.

When making Ajax requests with tools like Axios, remember to pass the token in the headers and retrieve it from either the cookie or local storage.

state: {
   token: Cookie.getJSON('token') || null,
},
mutations: {
  setToken: (state, data) => {
    state.token = data
    Cookie.set('token', data)
  }
},
actions: {
  setToken (context, data) {
    context.commit('setToken', data.token)
  }
}

For more information on managing cookies in JavaScript, visit https://www.npmjs.com/package/js-cookie.

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

retrieve PHP function calls as an array using Ajax

While working in PHP, I have encountered a situation where I needed to call a PHP function using AJAX: <button onclick="loop()">Do It</button> function loop() { $.get("ajax.php", { action: "true" }, function(result) { $("in ...

javascriptphpjqueryarraysajax

Is there a way to achieve this without relying on Ext.getCmp in this particular code snippet?

I am currently using the following code to trigger a button click event once the window show event is called. It works perfectly fine, but I want to achieve the same functionality without using Ext.getCmp. Here is the line of code: Ext.getCmp('recen ...

javascriptextjsextjs4

What are the best practices for utilizing ESM only npm packages alongside traditional npm packages within a single JavaScript file?

Hey there, I'm fairly new to web development and I encountered a problem when trying to require two packages, franc and langs, in my index.js file. It turns out that franc is now an ESM only package, requiring me to import it and mention type:module i ...

javascriptnode.jsnpm

Tips on extracting information from an AJAX call using JQuery

My current project involves utilizing a webapi in asp.net that outputs JSON data. I am looking to integrate this webapi with JQuery within a php-created website. The following is the JQuery code I am using to retrieve information from the webapi: $.ajax( ...

javascriptjqueryajax

Authenticating the identity of the client application - the client is currently within the browser

I have a PHP backend (although it's not really important) and a Javascript client that runs in the browser. Here is how the application operates: The user accesses a URL and receives raw templates for rendering data An Ajax GET query is sent to the ...

javascriptphpajaxsecurity

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

Dealing with two form submissions using a single handleSubmit function in react-hook-form

I have a React app with two address forms on one page. Each form has its own save address function that stores the address in the database. There is a single submit button that submits both fields and redirects to the next page (The plus button in the circ ...

javascriptreactjsreact-nativeformsreact-hook-form

The Vue2 transition feature is not functioning properly when adding new elements

Trying to implement a transition-group for animating list items upon deletion. The animation works smoothly when I remove an item from the list. However, adding a new list results in a console error message: [Vue warn]: <transition-group> children m ...

vue.jsvuejs2

Organizing a Collection of Likes within an AngularJS Service

I have a like button on my profile page that, when clicked, should add the user's like to an array and store it in the database. Within my profile controller, I have the following code: $scope.likeProfile = UserService.likeProfile(loggedInUser,$stat ...

javascriptarraysangularjs

Using embedded js files in jQuery's .load() function does not function properly

In the index.html file, I have the code snippet below: <div id="page-insert"></div> function openPage(pageid) { $('#page-insert').load(pageid); } openPage('testpage.html'); Additionally, there are script files embedde ...

javascriptjqueryhtmlajax

Fill your HTML form effortlessly using data from Google Sheets

I am relatively new to this topic, but I'm seeking a solution to populate an Apps Script Web App HTML dropdown form with names directly from a Google Spreadsheet. At the moment, I've managed to retrieve an array of names from column A in my sprea ...

javascriptjqueryhtmlgoogle-apps-script

Issue with clientHeight not functioning properly with line breaks in Angular 2 application after ngAfterViewInit

I have successfully created a Gridify page in my Angular 2 application using the Gridify library. To initialize it, I've utilized a custom ngAfterViewChecked method: ngAfterViewChecked() { var selector = document.querySelector('.read-grid& ...

javascriptangular

MUI: The fontFamily property is not able to be overridden by nesting within the

My goal is to have different fonts for different parts of my application using theme nesting. Unfortunately, I discovered that theme nesting doesn't work when it comes to overriding fonts. In my App.js file: import React from "react"; impor ...

javascriptreactjsmaterial-ui

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

I'm in search of a way to integrate the following code snippet as a JSTree into the heading section of a webpage, depicted below: <div id="jstree"> <ul> <li>Core 1 <ul> & ...

javascripthtmljsontreejstree

Tips for utilizing an array within React and transforming it into a component

I've developed a website that pulls data from a SQL database I created, containing details such as name, address, and occupation of individuals. I successfully managed to showcase this information on the webpage by structuring an array and inserting t ...

javascriptcssreactjs

What is the best way to convert $('input[type=text]') into vanilla JavaScript?

How can I change this to plain JavaScript? I've been struggling to find a solution, any pointers? ...

javascriptjquery

The HTML element cannot be set within page.evaluate in Node.js Puppeteer

I've run into an issue while using node.js puppeteer, specifically with the page.evaluate method. I'm experiencing difficulties with this part of my code: console.log(response); //This line is valid as it prints a regular string awa ...

javascriptnode.jspuppeteer

Password confirmation on the login screen will be displayed in a single line

As someone who is relatively new to HTML/CSS, most of what I have learned has come from this platform or by searching for answers online. I am nearing completion of my assignment, but I am struggling to figure out how to display two label words on the same ...

htmlcssauthenticationlabelscreen

Serve static files using ExpressJS when a post request is made

My Express server is set up to serve static files for my website and it's working fine: var express = require('express'); var app = express(); var path = require('path'); var p = path.join(__dirname, '../web/public'); app ...

javascriptnode.jsformsexpresspost

Prevent Duplicate Service Instances in Angular

After doing some thorough research online, I've identified the root of my issue: multiple instances of a particular service are being created. I need assistance in pinpointing and rectifying this problem within my code. The secondary service is depen ...

javascriptangulartypescriptangular6singleton