Items vanish once collected from the cookie shop

In my $routeProvider definition, I included the access parameter for a route:

$routeProvider.when('/tracks/:trackTitle/:mediaTitle',
{
    templateUrl: 'views/track-detail.html',
    controller: 'MediaCtrl',
    access: access.user 
    ...
}

To ensure user access to the page, I am monitoring the $routeChangeStart event. If the user does not have access, I save the route in the cookie store and load it after they log in.

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    $rootScope.error = null;
    if (!Auth.authorize(next.access)) {
        if (!Auth.isLoggedIn())
      $cookieStore.put('current.user.originalPath', originalPath);
      $location.path('/signup');
    }});

The issue arises when the next object seems to change between storing and retrieving it from the cookie store.

Before using $cookieStore.put, the next object looks like this:

$$route: Object
params: Object
pathParams: Object
__proto__: Object

However, when I retrieve it with $cookieStore.get, the object is missing the $$route property:

params: Object
pathParams: Object
__proto__: Object

The question now is why this happens and how can it be resolved?

Answer №1

The reason for this behavior is that Angular "JSONifies" values before they are placed into the cookie store.
When using Angular's toJson() method, any properties starting with $ are ignored. To work around this issue, you can use JSON.stringify() instead of Angular's toJson(), or rename the property from $$route to route (or any name without $).


Unfortunately, due to the "JSONification" process, not all types of properties can be stored successfully.
For example, functions or objects that cannot be converted to JSON (such as window, scopes, nodes, etc) will not be preserved.

You can also check out this quick demo.


If you don't actually need the entire $$route object, consider storing only the specific properties you require (like path, pathParams, etc).

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

Attempting to insert the symbol "$gt" into a query for a search. {[CastError: Unable to convert value "[object Object]" to date at path "createdAt"]}

In the following code snippet: Reviews.find({createdAt : {"$lt" : app.locals.lastDate}}), I am trying to dynamically change the $lt to $gt. app.post("/scroll", function(req, res){ console.log("req.body...", req.body); var sortCreate = req.body.old ...

Notification fails to display following POST request

Whenever the select menu displays "Please select your country" and I click the checkout button, an alert pops up. But if I select Canada, then go back to selecting "Please select your country" and press checkout, no alert appears. I need the alert to alway ...

At times, an InvalidArgumentError occurs stating: "The 'handle' parameter must be a string."

I have incorporated 'React-google-login' into my React project and now I am working on an automated test to make sure it functions correctly. try { await driver.get("http://localhost:3000/"); await driver.wait(until.elementLocated(By.xpath(` ...

The Vimeo player JavaScript API is experiencing issues on iOS devices

I am facing an issue where the API for playing a video only works on iOS after the play button is clicked in the player. However, it works fine on desktop and Chrome for Android. http://codepen.io/bdougherty/pen/JgDfm $(function() { var iframe = $(&a ...

What is the method for retrieving the data from an XMLHttpRequest response?

Is there a way to use jQuery to query the result of an XMLHttpRequest? For example, let's say I have this code snippet: $.get('somepage.htm', function(data) { console.log($("div.abc").text()); }); The issue is that $("div.abc").text() i ...

Sorts through nested arrays to uncover distinctive product assortments

Currently, I am in the process of developing a website using Next.js and Shopify. My objective is to create a page that displays all collections matching a specific productType. To achieve this, I have been exploring ways to extract this data from the Gra ...

The content rendered by React server side rendering is not accurate

Currently, I am in the midst of developing a react web application that utilizes React, Redux, and React Router, with server-side rendering facilitated by Express. The issue that I am encountering is rather complex to articulate. Allow me to break it down ...

When incorporating a Textarea element within styled components in ReactJS, it causes the text to be inputted backwards due to the cursor

Currently, I am utilizing the Textarea component from react-textarea-autosize along with using styled from styled components. In a class, I have created a function called renderForm which is responsible for rendering a form containing a StyledTextarea. How ...

Craft a JavaScript script (empowered by selenium) that endures through page reloads

In the process of developing a macro recording and playback system utilizing selenium and JavaScript, I encountered an issue. Essentially, I have implemented a JavaScript code that attaches a new event handler to all window events, capturing and storing ev ...

Converting a coordinate in a 3-dimensional space

Imagine I have two points in a three-dimensional space, let's call them A(x1, y1, z1) and B(x2, y2, z2). Now, I am looking to find a new point on the line AB, starting from point A, but at a distance of 5 units away. Can you help me figure out how to ...

Unlocking the power of $http convenience shortcuts in AngularJS

I have developed a custom function (credit to source) that wraps an AngularJS $http function in a way that switches between browser XHR and cordova-plugin-advanced-http based on the device platform. While the function works seamlessly with $http({method:& ...

How can we trigger a function once an ajax request has finished, without directly interacting with the ajax

I am facing a challenge where I need to trigger a JS function after an ajax call is completed, specifically when filtering posts in WordPress. The issue lies in the fact that the ajax filter tool in use is part of a WordPress plugin that cannot be modified ...

The Facebook bots are unable to crawl our AngularJS application because the JavaScript is not being properly

I have a unique setup where my website is built with AngularJS and Wordpress as a single page application. Depending on the routing of the page, I dynamically define meta tags in the controller. Here's a snippet of my HTML header: <meta property=" ...

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...

When using React with Firebase, remember to specify the "to" property when using setState to avoid errors

Struggling to figure out what's going wrong after hours of trying. I'm new to React and would really appreciate your help. Initially, my state was an array of accommodations which I mapped over successfully. However, once I connected Firebase wit ...

What is the functionality of string.slice(0, -1) with regards to a string in javascript?

In the example string named "example", using example.slice(0, -1) removes the last character. What is the mechanism through which slice(0, -1) eliminates the last character from a given string? ...

When you input text into a contenteditable div, it automatically gets placed inside a span element instead of being placed

I'm having an issue with my contenteditable div. Whenever I click the button, a span is inserted into the div. However, when I start typing, the text goes inside the span instead of outside it: jQuery(document).ready(function($) { let input = $(" ...

Using PHP script, extract information from a JSON file and populate a dropdown menu in HTML

I am attempting to extract data from a JSON file using PHP and then display this data in an HTML select tag on the front end. Below is my PHP file: <?php ini_set('display-errors', 'on'); error_reporting(E_ALL); $executionStartTim ...

Achieving successful CSRF integration with Express.js, AngularJS, and Ngin

Having difficulty understanding how to set up csrf protection in my specific setup. My configuration includes nginx for serving static files, expressjs for handling API calls, and angularjs for the front end. All requests to /api/* are routed to express, w ...

The debate between storing multiple references in a React component and querying the DOM by ID

While creating a form in React, I want to automatically focus on the first invalid field after submission. In order to achieve this, I need to have access to a reference of the invalid field and then call .focus() on it. My question is whether it would be ...