Issues with Cookies Updating Automatically - Using AngularJS

I have defined cookies using the following code snippet:

$cookies.userName = $scope.userName; ($scope.username represents a variable)
$scope.userName = $cookies.userName;

When rendering it in HTML, I use the following code:

{{userName}}

The cookies value is displaying correctly. The problem arises when a user logs in with username - aaa. The cookie then displays aaa.

Upon logout of user aaa and login of user bbb, the cookie value still shows as aaa. However, upon refreshing the page, the cookie value changes to bbb. This discrepancy only occurs after refreshing, not during normal logins that show the previous cookie value.

Could someone please recommend a solution for this issue?

javascriptangularjscookies

Answer №1

If you want to remove a cookie, you can simply use the code:

delete $cookies['userName'];

I hope this explanation clears up any confusion; just keep in mind that the method may vary depending on the software version being used.

Answer №2

When logging in (upon clicking the login button), add the line $rootScope.login= 1;. Then, in your login screen controller after setting a new cookie, include the following code-

    if ($rootScope.loin=== 1){
        window.location.reload();
     }

Once the above code is implemented, update your scope based on the cookie value.

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

Having trouble getting Google Tag Manager (GTM) to function properly on SharePoint?

I inserted the GTM code within the SharePoint Master Page body tag. <body> <--Body content goes here --> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX" he ...

javascriptsharepointgoogle-apisharepoint-2013google-tag-manager

Monitor when users enter commas into input fields in AngularJS

My current challenge involves monitoring user input in a text field and validating the input when a comma is typed, instead of using ng-click="action()". I am looking to implement something like Comma-Typed="action()", but my attempts with ng-change and sc ...

javascriptangularjs

Yeoman - Storing global settings efficiently

I have recently developed a Yeoman generator and am now looking to incorporate prompts for certain global configurations. My goal is to have the generator prompt users for their GitHub username and token during the initial run, and then somehow store this ...

javascriptnode.jsyeomanyeoman-generator

Creation of Date object

Trying to create a new Date object with the constructor new Date(24, 2, 1, 0, 0 ,0) is causing an issue where it defaults to using setYear instead of setFullYear, resulting in the year being set as 1924. While this may work in most cases, I need the abilit ...

javascriptdate

Exploring the capabilities of ECMAScript generators within the Intel XDK Simulator

I am attempting to utilize a generator that has been declared using function* in Intel XDK. The simulate function within XDK is said to be based on Chromium, though it's difficult to determine the specific version ('about' box and similar fe ...

javascriptintel-xdk

Loading large amounts of data efficiently with Angular and Firebase

Currently, I am utilizing AngularJS in conjunction with Firebase. Objective: My aim is to showcase all the information stored within my Firebase database (which consists of a fixed number of approximately 1600 items). Challenge: The issue at hand is that ...

angularjsfirebaseangularfire

Exploring Dragula in Angular: A Guide to Accessing the Model Item

How can I access the specific model item that was dragged and dropped using the drop-model event in AngularJS? The documentation describes the drop event as follows: el was dropped into target before a sibling element, and originally came from source ...

angularjsdragulaangular-dragula

The server has sent cookies headers, however, the browser did not store the cookies

I need assistance in understanding why browsers such as Chrome are not setting cookies, even though the Set-Cookie header is present in the Response Headers: Access-Control-Allow-Origin: * Connection: keep-alive Content-Length: 345 Content-Type: applicati ...

javascriptexpressvue.jscookies

Experiencing difficulties managing NodeJS session

I've been attempting to integrate a login feature into my nodejs-based web application. const express = require('express'); const app = express(); const route = express.router; const sessions = require("client-sessions"); app.use(sessions ...

javascriptnode.jsexpresssessionauthentication

Issue with Chart.js not showing up in Android Webview when animation is disabled

I am experiencing an issue with a javascript enabled WebView using a ChromeWebClient. The Chart.Js pie example displays fine until I set the options to animation: false, after which the chart stops displaying. var pieOptions = { animation : fa ...

javascriptandroidwebviewchart.js

React State RefreshIs this rewrite good enough?

Displayed above is an image of an object containing two UI controls stored as this.state.controls. Initially, the state values are set with data received before componentDidMount. Updates to the controls' state values are triggered by an event, which ...

javascriptreactjs

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Exploring the AngularUI Router framework for the first time, I am curious about how to enhance the code snippet below. Everything is functioning well at the moment, but as the project progresses, it will feature 20 questions or more. I want to avoid repea ...

javascriptangularjsangular-uiangular-ui-router

What is the best way to send my webform data to a web API controller as a model class using JQuery AJAX?

This is the AJAX code I have written to pass two values to my API: function submitData() { var username = $("#username").val(); var password = $("#password").val(); $.ajax({ type: 'POST', ...

javascriptc#jqueryajaxasp.net-web-api

Incorporate a personalized menu into the FullPage.js section

Seeking advice on fullpage.js for my website - Can a non-sticky menu be added to all sections without affecting loading speed? I attempted to include the menu code in each section, but it slowed down my website. Any suggestions or tips? ...

javascriptjqueryhtmlcssfullpage.js

Navigating to a specific route upon the arrival of a push notification (Angular, Ionic, ngcordova)

Imagine this situation. I am working with an ionic / angular app and implementing the ngcordova plugin for push notifications. Picture this: a push notification comes in while the app is running in the background. The user checks the notification in the ...

androidangularjspush-notificationionic-framework

I am trying to move to a different page, but for some reason the router.navigate function is not functioning within the subscribe

//I am attempting to redirect to another page once the subscribe method is executed, however I am encountering issues with the router.navigate function within the subscribe method. //In an effort to address this issue, I have attempted to store the data r ...

javascriptnode.jsangularmongodbexpress

Component-driven form validation in Angular 2

I'm facing a challenge with implementing model-driven form validation in my custom input component. Specifically, I need to figure out how to pass ngControl to the component. In the plunkr demo provided at http://plnkr.co/edit/QTmxl8ij5Z6E3xKh45hI?p= ...

angularjsformsvalidationinputangular

checking the validity of serialized information in Ajax

I am facing a specific issue where I need to validate data before it is saved through an ajax call. When the user switches to a different URL, the save_ass_rub function is triggered. Within my application, there is a custom Window that allows users to inp ...

javascriptjqueryajaxprototypejs

Dealing with the percentage sign in table names during data retrieval

When using React and Express to retrieve and store data in JSON format, what is the correct way to reference tables that have a percentage sign in their name? componentDidMount() { // Retrieve data from http://localhost:5000/citystats, sort by ID, t ...

javascriptnode.jsreactjsexpressecmascript-6

Transferring cookies between frontend and backend applications (distinct services hosted on GCP Cloud Run)

I encountered an intriguing dilemma. My frontend and backend services are operating separately on GCP Cloud Run. The frontend consists of Next.js 14 + Apollo Client + Supabase for authentication. On the other hand, the backend is comprised of Express + Apo ...

expresscookiesapollo-clientgoogle-cloud-run