CODEWITHSUNDEEP
vuejs2
Garfonzo
Garfonzo

Reputation: 3966

VueJS - Auth Token stored in localStorage not working on iPhone?

I built an app that uses a Token for authorization. The user logs in and gets a token back from the backend. That token is stored in localStorage in the browser and then used for every subsequent call to the API. If the token is not present or is the wrong token, the calls are rejected with a 401 - Unauthorized.

This works flawlessly on my desktop browser, but when I try to use it on my iPhone, a bunch of the calls are rejected as 401 - Unauthorized -- but not all are rejected. I hooked my phone up to my laptop for Safari remote debugging, and I can confirm that the token is sitting in local storage, and it's the right token.

There seems to be a pattern, though. I can update existing entries from my phone, but I cannot create new entries from my phone - these get rejected as 401.

Am I missing something about how Vue handles localStorage on a mobile device? Is there a reason why it doesn't work on an iPhone in the same way as on a browser?

I'm rather stumped...

Upvotes: 1

Views: 1396

Answers (2)

Garfonzo
Garfonzo

Reputation: 3966

SOLUTION

It turned out that some of my URLs in my app had trailing slashes, while some did not. The URLs that did not have a trailing slash would fail on my phone, but would work fine on my desktop. I went through all my code and added trailing slashes everywhere and now it all works. 

var url = 'projects' <- works on desktop, returns 401 on phone
var url = 'projects/' <- works on desktop AND phone

Upvotes: 1

bbsimonbb
bbsimonbb

Reputation: 29020

No, is the short answer. First thing is to get Vue out of the loop. Vue doesn't access local storage, your js does. The only Iphone gotcha I can think of is that apps installed on the home screen do not share their context with safari. I don't think that's your problem. I really doubt this has anything to do with localStorage.

There are a number of ways to inspect, char by char, the request sent to your api - safari dev tools, fiddler. Crawl over the request headers. Pay special attention to any difference in capitalisation or whitespace, particularly of course the Auth header. The problem is there staring at you somewhere.

Upvotes: 0

Related Questions