1

I am working on a project where a lot of things are dependant on cookies. We have a weird requirement at the moment. Our customer can log in with different user id in a different tab.

Important: sessionStorage is the best way to store but sometimes we are losing data while routing and many other cases, so we started keeping data in sessionStorage as well as cookies

Using angular 2 and 6

Issues/Questions:

  1. Since everything is based on cookies, the data between the different users are getting shared with each other and resulting in the business loss. Is there any better approach to handle, store data instead of cookies?

    To resolve issue 1 we used this approach: When the users already logged in, and try to login in another tab with different user id, we show a popup saying "you have logged in with another user id. do you want to log in again?". If the user clicks the "Yes" button, we will activate the current tab and deactivate the last tab user session.

    But the problem here is there are many cases where we need to delete a particular cookie. I tried Jquery-cookie plugin, ng2-cookies as well as setting an expiry but every time I open the application in chrome dev tool I see the cookie available and not deleted. Whenever I access deleted cookie I get the cookie and the logic fails.

So, the second question is; what is the better way to delete a cookie? I have tried ng2-cookies`, jquery-c0okie and setting expiry but no luck in deleting a cookie.

  • 1
    What you're trying to do is fundamentally the wrong model for the browser. The only clean way I see of having two separate tabs do different things is to produce a SPA, and the user needs to log in every time they open the site. As soon as you involve reloading the site, you necessitate storage of data somewhere, and at that point it's irrelevant whether you reload the page because you move from one page to another or because you're opening a second tab; it's all the same in the way the browser operates. – deceze Jul 10 '18 at 08:52
  • This is what we are doing currently. But when a user logged in already and again logging in with another user id in another tab, upto this fine. The issue is when the user goes the 1st session and tried to do something without reloading, everything gets disturbed. –  Jul 10 '18 at 09:07
  • Could you explain a little more what you mean you can't use sessionStorage? Holding a flag there for your case and using this (https://stackoverflow.com/questions/1038643/event-for-when-user-switches-browser-tabs) to evaluate when the user goes to another tab, you probably could could "disable" your tab second time he comes if this flag is on place. When I say disable is show some modal that doesn't allow him to press anything unless he reconnects. – Anastasios Selmani Jul 10 '18 at 09:07
  • @AnastasiosSelmanis In a lot of cases, I'm losing data present in the sessionStorage. Surprisingly not losing the same data from the cookies. –  Jul 10 '18 at 09:11
  • As soon as you store anything in shared storage like session store or cookies, you are going to get into conflicts between tabs. No, by SPA I essentially meant that you're not storing anything in any sort of semi-permanent shared store, but keep it all just in Javascript variables. That persists only as long as the page stays open, but it's also guaranteed to not conflict with other tabs. – deceze Jul 10 '18 at 09:13
  • Ok but if you can use sessionStorage (If it is ok with compatibility issues for your app) then you shouldn't have issues :) What I am trying to say is evaluating a flag value every time a new login happens. An enum with first login that goes to second login if it already first login would do your job and it is pretty simple information to handle. – Anastasios Selmani Jul 10 '18 at 09:16
  • I have an idea to use a class from es6. To have a variable for each thing which is used to store in the cookies. Let say, a variable called `name`. So I will create a class and created a setter and getter for the variable as in Java, I had this thing in mind. But I am not sure that the variable's value will not be shared across the tabs, need to check this practically, if you say so. –  Jul 10 '18 at 09:19
  • @AnastasiosSelmanis I can't completely rely on sessionStorage because I'm loosing data in between. –  Jul 10 '18 at 09:22
  • Ok but I am guessing the variable you will use in the cooke will have to be pretty much the same thing. If you mean to change the name of the variable of the cookie when the user is in another tab, if he goes back an performs an action the cookie variable will have the changed value. You will have to use some kind of state holding mechanism and understand to which case you are. Just saying. Keep in mind also that maybe your user wants to open a lot of tabs. It doesn't change much but just as a reminder for the states of your variable. – Anastasios Selmani Jul 10 '18 at 09:32
  • @AnastasiosSelmanis "I have an idea to use a class from es6. To have a variable for each thing which is used to store in the cookies. Let say, a variable called name. So I will create a class and create a setter and a getter for the variable as in Java, I had this thing in mind. But I am not sure that the variable's value will not be shared across the tabs, need to check this practically, if you say so." do you think it gonna work? –  Jul 10 '18 at 10:14
  • @AnastasiosSelmanis If I go with above approach(creating a class, variable and a set of getter and setter to each property) are sure that data sotred to the variable will be tab specific, and will not be shared? –  Jul 10 '18 at 10:17
  • If I understand correctly you are saying to store some object to the cookie right? This object will be shared from all tabs. You use the same cookie in your browser. It won't make any difference from which tab you will do your request. I don't know if this is your question. The cookie will be the same but you can handle the case from the value of the object and client side events. That is what I was talking about. – Anastasios Selmani Jul 10 '18 at 10:42
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174726/discussion-between-soham-and-anastasios-selmanis). –  Jul 10 '18 at 13:47

1 Answers1

1

Our customer can log in with different user id in a different tab

Some caution here! This a very unusual requirement and not one browsers are intended to handle so any solution will be a hack. I would strongly urge you to discuss with your client and recommend they drop this requirement.

Assuming that is completely impossible and they are holding your family to ransom, it is solvable - use the window.name property to divide up the session. You would still use the usual cookie method for the session. This is going to need some javascript to check for a blank name and a webservice to allocate a new name. And of course you need to inject the name into all the forms / URLs.

symcbean
  • 47,736
  • 6
  • 59
  • 94
  • I agree with using **window.name** but we can't depend on it to verify the user is using the same id or different id to login in another tab. –  Jul 10 '18 at 09:01
  • I understand this has become mess already but I need to find a working solution for this. –  Jul 10 '18 at 09:02
  • I am only suggesting using window.name to subdivide the session data - NOT as the session identifier. – symcbean Jul 10 '18 at 11:33
  • (you didn't tell us what is serverside / how the session id is currently maintained) – symcbean Jul 10 '18 at 11:39